vitorarjol

vitorarjol

Member Since 4 Years Ago

São José do Rio Preto

Experience Points 46,380
Experience Level 10

3,620 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed 429
Lessons
Completed
Best Reply Awards 22
Best Reply
Awards
  • Start Your Engines Achievement

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • First Thousand Achievement

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • One Year Member Achievement

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • Two Year Member Achievement

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • Three Year Member Achievement

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • Four Year Member Achievement

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • Five Year Member Achievement

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • School In Session Achievement

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • Welcome To The Community Achievement

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • Full Time Learner Achievement

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • Pay It Forward Achievement

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • Subscriber Achievement

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • Lifer Achievement

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • Laracasts Evangelist Achievement

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • Chatty Cathy Achievement

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • Laracasts Veteran Achievement

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • Ten Thousand Strong Achievement

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • Laracasts Master Achievement

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • Laracasts Tutor Achievement

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • Laracasts Sensei Achievement

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • Top 50 Achievement

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

15 Nov
2 years ago

vitorarjol left a reply on Laracasts Refresh

Not a 'visual bug', but this version suffer of the same 'problem' of the older one. The video size in notebooks (15,6 inch / 1366x768) doesn't fit the screen (is bigger).

=/

08 Nov
2 years ago

vitorarjol left a reply on A Graph Vue Component

@zerogpm You need to do some changes in your chart.vue

First, the element of the canvas need to be set dinamically, like this:

<canvas :id="id" width="400" height="400"></canvas>

And second, the id property is a string, not an object:

id: ''

The full file:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Chart</div>

                    <div class="panel-body">
                        <canvas :id="id" width="400" height="400"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Chart from 'chart.js';
    export default {

      props: {

        label: {},

        values: {},

        color : {

          default: 'rgba(220, 220, 220, 0.2)'

        },

        id : '',

        type : {

           default: 'line',

        }

      },

      options: {
          scales: {
              yAxes: [{
                  ticks: {
                      beginAtZero:true
                  }
              }]
          },
      },

      mounted(){
        console.log(this.id);
        var data = {
            labels: this.label,
            datasets: [{
                label: '# Cash',
                data: this.values,
                backgroundColor: this.color,
                borderWidth: 1
            }]
        };

        var ctx = document.getElementById(this.id);

        var myChart = new Chart(ctx, {

            type: this.type,

            data: data,

            options: this.options

          });
      }
    }

</script>

=D

07 Nov
2 years ago

vitorarjol left a reply on A Graph Vue Component

@zerogpm Hi. I think that my explanation was a bit confusing. You're using 2 charts, like this:

<chart
            :label="['April', 'May', 'June']"
            :values="[100,420,99]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
    ></chart>
<chart
            :label="['April', 'May', 'June']"
            :values="[100,420,99]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
    ></chart>

But you have to identify them, using a prop, like this:

<chart
            :label="['April', 'May', 'June']"
            :values="[100,420,99]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
        id='firstChart'
    ></chart>
<chart
            :label="['April', 'May', 'June']"
            :values="[100,420,99]"
            type="doughnut"
            :color="['#FF6384','#36A2EB', '#FFCE56']"
        id='secondChart'
    ></chart>

So now your chart component will be using different identifiers, and you will be able to render both charts.

vitorarjol left a reply on A Graph Vue Component

@zerogpm You're using the same element for the both charts var ctx = document.getElementById("myChart");.

Try to pass this information as a property, then you can do something like this:

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Chart</div>

                    <div class="panel-body">
                        <canvas :id="element" width="400" height="400"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
props: {

        label: {},

        values: {},

        color : {

          default: 'rgba(220, 220, 220, 0.2)'

        },

        type : {

           default: 'line',

        },
    
    element: ''
      },
   mounted(){

        var ctx = document.getElementById(this.element);

        var myChart = new Chart(ctx, {
          type: this.type,

          data: {
            labels: this.label,
            datasets: [{
              label: '# Cash',
              data: this.values,
              backgroundColor: this.color,
              borderWidth: 1
            }]
          },

          options: this.options

          });
        }
    }
```
08 Apr
3 years ago

vitorarjol left a reply on How To Organize Vue Modules With Br

@gocanto If you're using jQuery, you can do like that:

if (jQuery('#npl-login').length > 0) {
    new Vue({
    el: '#npl-login'
})

Hope it helps =]

vitorarjol left a reply on Vueify Components And Data

Hi @LeBlaireau, you need to pass the props for the component, like so:

<home :days-of-the-week="daysoftheweek" ><\home>

And in your component you need to set the props key:

//home.vue

export default {
    data: function () {
        return {}
    },
    props: ['daysOfTheWeek']
}
04 Mar
3 years ago

vitorarjol left a reply on Can Not Use Data Prop In Child Component

Hi @tronghiep92. That's because on the "ready" of the component the data was'nt available yet. Note that in this example here http://jsbin.com/mofiqedupi/1/edit?js,console,output I put the user data on the prop of the parent, instead of set on the ready method.

23 Nov
3 years ago

vitorarjol left a reply on Server Error Can't Find .env

@lars64 Look if you can find the .env.example file. Just rename it to .env and try again.

19 Nov
3 years ago

vitorarjol left a reply on Redirect From Method In Vue.js With Vue-router

@strategicsdemexico The same way. Are you getting some error?

17 Nov
3 years ago

vitorarjol left a reply on Redirect From Method In Vue.js With Vue-router

@strategicsdemexico Use the router.go(path) option.

savePost: function(){
            this.$http.post('/posts', this.post)
            .success(function(post){
         router.go('/')
            });
        },

vitorarjol left a reply on Vue Ajax Delete Request

@lstables The window.location expects the complete url.

Example:

window.location = 'https://laracasts.com/';

vitorarjol left a reply on Multiple Components

@bart I'm glad that it helped you \o/

16 Nov
3 years ago

vitorarjol left a reply on Vue Ajax Delete Request

@lstables How about that:

this.$http.delete('/api/todos/delete/' + message.id)
                        .success(function(response) {
                            //Redirect goes here
               //something like:  window.location = the url
                        }) 
                        .error(function(errors) {
                            //Handle error
                        });

vitorarjol left a reply on Vue Resource Scope Help

@FBi23 @sijdesign @sutherland @Lord_Sharkca The solution is simple. He could just bind the scope (this) to the callback function.

Example:

  removePlayer: function(clanID, playerID, e){
      swal({
        title: "Are you sure?",
        text: "Do you really want to remove this Player from your Clan?",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DB2B39",
        confirmButtonText: "Yes, remove Player!",
        closeOnConfirm: false
      }, function() {
        //request
          var cData = new FormData();
          cData.append('clan_id', clanID);
          cData.append('player_id', playerID);
    
    //Vue-resource Post request
          this.$http.post('/clans/remove', cData)
          .success(function(clan){
              this.fetchClan();
              swal("Removed!", "Player has been successfully removed from your Clan", "success");
          })
          .error(function(errors){
            //Handle Errors

          });

      });

    }.bind(this); //This line is the important one

vitorarjol left a reply on Vue Routers Vs Http.post ?

Hi @marcgaumont! Are you trying to get another page or just some content?

If you're looking for update the "view", link browsing to another page, I would recommend to use the router, with the v-link, and, as you said, update the component.

Otherwise, if it's just a part of the content, go for the vue-resource $http.post (or whatever).

I hope it helps you! Ping me if you want to discuss this further.

vitorarjol left a reply on Multiple Components

@bart Do you create a vue instance for each component?

Using the global registration you have to put the components before the main instance, so that's could be your problem. Maybe something like this helps you:

Vue.component('my-nth-component', {
    // Component data and logic goes here
});

Vue.component('my-nth-component2', {
    // Component data and logic goes here
});


Vue.component('my-nth-componentN', {
    // Component data and logic goes here
});

var vue = new Vue({
    el: 'body'
}); 
10 Nov
3 years ago

vitorarjol left a reply on Selecting Custom Attribute Value

@jillztom You're looking for Form Input Bindings (http://vuejs.org/guide/forms.html)

Use the directive v-model to bind the value of an input to a property on your vue instance, then you will be able to use the value. Like so:

<div property-value = "New York" v-on="click: getProperty" v-model="city1"> New York</div>
<div property-value = "San Francisco" v-on="click: getProperty" v-model="city2"> San Francisco</div>

In the Vue instance:

new Vue({
    data: {
        city1: 'New York',
        city2: 'San Francisco'
        },
    methods: {
        getProperty: function(){
               // How can I get the value of $(this).attr('property-value'); ?
            console.log(this.city1); //The word "this" here point's to the Vue instance, and this will print "New york"
         }
        }
})

vitorarjol left a reply on [L5.1 And Vue.js] Error Handing With Laravel And Vue.js 1.0

@olimorris The problem is the

<spark-errors form="@'{'{ registerForm '}'}"></spark-errors>

In the 1.0.* of Vue Evan has changed the bindings a little bit.

Try using :form to bind the form properly, like this:

<spark-errors :form="@'{'{ registerForm '}'}"></spark-errors>

I've struggled with this a little just yesterday haha.

Reference:

<!-- props -->
<my-comp
  prop="literal string"
  v-bind:prop="defaultOneWay"
  v-bind:prop.sync="twoWay"
  v-bind:prop.once="oneTime">
</my-comp>

https://github.com/vuejs/vue/wiki/1.0.0-binding-syntax-cheatsheet

vitorarjol left a reply on Change {{ }} Tags

@El_Matella Yes, there is! :D

Vue.config.delimiters = ['<%', '%>']

Reference: http://vuejs.org/api/#delimiters

Hope it helps!

vitorarjol left a reply on Vue Simple JSON Example

@ashleywnj Maybe it's because the list of items need an identifier in order to work. Something like this:

<li v-repeat="item: items">
      - <span class="message">{{item.commit.message}}</span><br>
      by <span class="author">{{item.commit.author.name}}</span>
      at <span class="date">{{item.commit.author.date}}</span>
    </li>

These are the old docs: http://011.vuejs.org/guide/list.html#Using_an_identifier

=]

vitorarjol left a reply on Vue Simple JSON Example

Hi @ashleywnj. I saw that in your fiddle you're using the 0.11 version. Is that right?

This version is very old, and there are a lot of changes on the 1.0.* releases.

I made a fiddle with the newest version (1.0.7), that works. Here is the code:

https://jsfiddle.net/kkpLnv6k/

Some points that you can take a look:

First, this is the cheatsheet for the syntax of the 1.0.* version: https://github.com/vuejs/vue/wiki/1.0.0-binding-syntax-cheatsheet

Other point is that the v-repeat directive is deprecated. Now, you have to use the v-for directive.

The last one is that in order to make it work with the Blade templates, you have to put the @ symbol before the mustache tags, as you have made in your fiddle.

Hope it helps!!

vitorarjol left a reply on Laracasts New Layout Is Awesome.

@JeffreyWay On the https://laracasts.com/skills/php page, all the steps are frozen with "5 Videos".

03 Nov
3 years ago

vitorarjol left a reply on Can't Write Into A Table

@devartpro Just to be sure... Your table has some required fields, are you filling them all?

18 Sep
3 years ago

vitorarjol left a reply on How To Load CSS From Public Folder For Elixir?

You can pass a second parameter to the styles function:

elixir(function(mix) {
    mix
        
        .styles([
            'public/Unify1_8/plugins/bootstrap/css/bootstrap.css',
            'public/Unify1_8/css/ie8.css',
            'public/Unify1_8/css/blocks.css',
            'public/Unify1_8/css/plugins.css',
            'public/Unify1_8/css/app.css',
            'public/Unify1_8/css/style.css'
        ], 'public/assets/css/frontend.css', './');

    mix.version([
        'public/assets/css/frontend.css'
    ]);
});

vitorarjol left a reply on Vue.js With Multiple Instances

Yeah @chrisburton, I saw that context when you linked the code from Laracasts. Well, in that case, Jeffrey is handling the likes with the methods addUserToList and removeUserFromList and simple properties like users and likes :)

vitorarjol left a reply on Vue.js With Multiple Instances

@chrisburton Maybe I'm getting your idea wrong. If you want to have a counter of likes/dislikes, toggle will not work for you. If you want just one like or dislike ok. Try to "like" a comment twice here at laracasts.

Maybe this comment confused me

vitorarjol left a reply on Vue.js With Multiple Instances

@chrisburton Yes, you'll have to be explicit and provide two buttons for the user.

vitorarjol left a reply on Vue.js With Multiple Instances

@chrisburton Well, I'll have to add another button then, and use one to increase and the other one to decrease the number of likes. The toggleLike can't do the both things in the actual code.

vitorarjol left a reply on Vue.js With Multiple Instances

@chrisburton Do you want to increase the counter more than 1? Because your method toggleLike it's "locking" the value from increase more. And yes, you can add the mustache sintax inside the template.

vitorarjol left a reply on Vue.js With Multiple Instances

@chrisburton Last update, the complete code it's in the first answer!

vitorarjol left a reply on Vue.js With Multiple Instances

@chrisburton It was a mistake in my code. Try now, I have updated my comment.

vitorarjol left a reply on Vue.js With Multiple Instances

@chrisburton What if you wrap the content into a div, and update the el selector from vue like this:

#HTML
<div id="app">
<button class="icon-rocknroll" v-class="active: liked" v-on="click: toggleLike"></button>
<span class="likesCount" v-class="active: liked">{{ likesCount }}</span>
</div>

#JS
new Vue({
  el: "#app",

  data: {
      liked: false,

      likesCount: 0
  },
    methods: {
      toggleLike: function() {
        this.liked = ! this.liked;
        this.liked ? this.likesCount++ : this.likesCount--;
      }
    }
  
});
15 Sep
3 years ago

vitorarjol left a reply on Laracasts Forum Code

@lorvent If it helps, Flarum is open source:

https://github.com/flarum/flarum

11 Sep
3 years ago

vitorarjol left a reply on Date Picker

Try this:

$( document ).ready(function() {
    $( "#datepicker" ).datepicker();
});

vitorarjol left a reply on Forge - PHP7 Update

@kayyyy Unfortunately not :(

vitorarjol left a reply on Forge - PHP7 Update

@kayyyy Taylor said that "the way" to do it it's provisioning another server and change dns.

vitorarjol left a reply on Vuejs - Syntax Error In Blade

@peanut Hm, now I see. Do you have the option to put the function gallery_image in the js? Than you could just

<sliderthumb v-repeat="thumbs" send-index="@{{ updateIndex }}" v-ref="thumb" 
    image-src="@{{ gallery_image(image) }}" 
    image-alt="@{{ imageAlt }}" 
    caption="@{{ caption }}"
    margin-top="[email protected]{{ marginTop }}%">
</sliderthumb>

vitorarjol left a reply on Vuejs - Syntax Error In Blade

Hi @peanut. To img src attributes, you'll have to use the v-attrdirective.

From the Vue js Docs:

You should use v-attr instead of mustache binding when setting the src attribute on elements. Your templates are parsed by the browser before being compiled by Vue.js, so the mustache binding will cause a 404 when the browser tries to fetch it as the image’s URL.

http://vuejs.org/api/directives.html#v-attr

10 Sep
3 years ago

vitorarjol left a reply on Remove File After Return Response::download($filename);

@danjavia Try this code:

return Response::download($filename)->deleteFileAfterSend(true);

vitorarjol left a reply on Pagination Help/Logic

@JoeDawson Great! Now, for that $phothos, how do you are handling the prev and next links in the view?? From the pagination helper or are you trying to use the id from a $photo?

vitorarjol left a reply on Pagination Help/Logic

The reason why I'm insisting on the pagination it's because if you paginate your query it will handle the next and prev photos, and the ID will not by a trouble anymore.

vitorarjol left a reply on Pagination Help/Logic

Can you show the method where you get the photos if I navigate to /photos/popular?

vitorarjol left a reply on Pagination Help/Logic

I know that is about pagination. The problem I see here is that you're reusing the method show, but the collection should be different based on the page that the users access.

The scope was just to exemplify that you could get one collection for the /photos/popular link, and instead of passing the next and previous ID's, use the pagination helper to do this work.

BUT, if you're reloading the page everytime that the user click's on a link, this will not work :/.

I'll think more about this second case.

vitorarjol left a reply on Pagination Help/Logic

@JoeDawson I would use something like that:

/**
     * Scope a query to only include popular photos.
     *
     * @return \Illuminate\Database\Eloquent\Builder
     */
    public function scopePopular($query)
    {
        return $query->where('likes', '>', 100);
    }

//Then in the controller (or whatever you get the photos :] )
$photos = App\Photos::popular()->paginate(10);

Then I would use the pagination of Laravel to get the hard work for me (You won't have to concern about the Id anymore) http://laravel.com/docs/5.1/pagination

Hope it helps!

vitorarjol left a reply on MySQL Connection Based On User Setting.

I use a middleware to do this check. Somethink like this code:

<?php

namespace Somma\Http\Middleware;

use Closure;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Config;
use Illuminate\Support\Facades\DB;

class SetUserConnection {

    /**
     * Sets the connection's 
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $atualDb = DB::getName();
    $training = #check with the env variable here;
        if($training && $atualDb == 'mysql') { 
            // Close the connection made before to avoid conflicts
            DB::disconnect('mysql');

            // Set the training database connection
            DB::connection('mysql_training');
        }

    if(!$training && $atualDb != 'mysql') {
            // Close the connection made before to avoid conflicts
            DB::disconnect('mysql_training');

            // Set the training database connection
            DB::connection('mysql');
        }

        return $next($request);
    }

}

vitorarjol left a reply on Homestead TTFB > 2sec Issue .. Help

My TTFB is 884 ms. Windows 8, HDD, 4GB of Ram and my homestead machine in this computer has 512 mb of ram.

vitorarjol left a reply on Has Anyone Gotten Elixr To Work In Windows On Vagrant With Homestead Without Sudo?

@alexhackney I do all the interations with npm and gulp outside my vm. It works as expected.