v-model with custom element that wrap checkbox.

Hi,

I am using vuejs 2.0.1 and I want to create a component that looks like this:

    <vue-checkbox v-model="page.ads_able"></vue-checkbox>

As from the api page that v-model is a syntactic sugar combinding :value and @input.

So I write a template with a props name value and a method for input event like this:

...
<input type="checkbox" :value="value" @input="onInput" />
...

...
props: {
        value: {},
},
methods: {
        onInput(event) {
            this.$emit('input', event.target.value)
        }
}
...

But it doesn’t work. I don’t know if there any special care about checked attribute of the checkbox. I tried the exact same thing with <select> and it’s worked as aspect though. Any suggestion?

[phattarachai]

Well, I think I find a solution to my own question.

I need to set a data variable to accept value from props and change that data at the corresponding event then emit the input event so that v-model can handle the value change. Something along these lines:

template

<input type="checkbox" 
           value="1"
           :checked="checked"
           @change="change"
    />

And in javascript:

      data: function() {
            return {
                checked: this.value
            };
        },
        props: ['value'],

       methods: {
            change: function() {
                this.checked = !this.checked;
                this.$emit('input', this.checked);
            }
       }

That’s work now. 😄

[arvx47]

Sorry for beign late. I came up with this solution, what do you guys think?

Vue.component("v-check", {
  template: `	
  <input type="checkbox" :value="value" v-model="proxyChecked" />
  `,
  model: {
    prop: "checked",
    event: "change",
  },
  props: {
    checked: {
      type: [Array, Boolean],
      default: false,
    },
    value: {
      default: null,
    },
  },
  computed: {
    proxyChecked: {
      get() {
        return this.checked;
      },
      set(val) {
        this.$emit("change", val);
      },
    },
  },
});

Code demo here: https://jsfiddle.net/ariel0196/euzn79gc/3/