Customized Vue Component using v-model

Question

Vue newbie here.

Reading the following guide on view components:

https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

Presumably upon clicking the checkbox, the value of 'lovingVue' will be passed to the 'checked' prop which will either be a true or false value. But I don't understand what the Vue instance should look like and am wondering if someone can explain this to me?

Cheers, Geof.

I don't think so, what I am not sure of is what the vue instance should look like (as I know it needs to contain the lovingVue property, in some form) — geofrey rainey

Ahm. Ahm. · Accepted Answer · 2019-02-12T10:45:33

JS Fiddle Demo (open your console when you are using it)

Hey geofrey,

First of all, I think that I am newbie too and i will always be :)....

Vue.component() is a way of making component templets but inside the script not inside the HTML templet....still you need to initiate a new Vue() instance.

the "$emit('change', $event.target.checked) inside the child a component, is just a way for the Child component to send back values to the Parent component...

the first argument the $emit() takes is the event listener name (can be any word), check this link , so that's why the event listener here <base-checkbox @change="lovingVue"> is called @change.

The second argument it takes is which value you want to send back to the parent...in this case we want to send the v-bind:checked="checked" value....and this name is what we mention after the $event.target.

then comes the lovingVue part which you can call it as a function in the methods (as if you were treating it as any other event), and it will be carrying the value with it

    new Vue({
    //'#app' is the name of the parent componenet
    el: '#app',
    methods:{
      // The e (can be any letter or word) here is the value that was emitted by the
      // child(base-checkbox) to the parent(app)...and this case the value is Boolean
      lovingVue(e){
        console.log(e)
      }
    }
    })

Customized Vue Component using v-model

1 Answers