Question

我正在遵循VueJS指南，目前我正在关注https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model。

我试图创建一个最小的例子，但是还没有能够使它发挥作用。

我需要进行哪些更改，以便以下两个HTML语句可以互换，如VueJS指南所示？：

<my-checkbox :checked="chicken" @change="val => { chicken = val }" value="A Bird"></my-checkbox>

和

<my-checkbox v-model="chicken" value="Chicken"></my-checkbox>

这是我到目前为止所获得的代码。

＆＃13;

// Components#CustomizingComponentVModel
Vue.component('myCheckbox', {
  model: { prop: 'checked', emit: 'change' },
  props: ['value'],
  methods: {
    uVal: function(checkStatus) {
      this.$emit('change', checkStatus);
    }
  },
  template: '<span>' + 
              '<input type="checkbox" @change="uVal($event.target.checked)">' +
              '<label>{{ value }}</label>' + 
            '</span>'
});

// Default app
new Vue({
  el: '#app',
  data: function() {
    return { chicken: false };
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>

<!-- 
     I am trying to create a minimal example of customizing v-model described at
     https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model
-->

<div id="app">
  <my-checkbox :checked="chicken" @change="val => { chicken = val }" value="A Bird"></my-checkbox>
  <!-- VueJS guide suggest that previous line is same as the next one: -->
  <!-- <my-checkbox v-model="chicken" value="Chicken"></my-checkbox> -->
  <!-- If I comment line 9 and uncomment line 11, what changes do I need to make in my code to make this work? Also, why are those changes needed? -->
  <p>Chicken: {{ chicken }}</p>
</div>

＆＃13;

Answer 1

您希望发出input事件而不是change事件，如in the documentation所述：

因此，对于使用v-model的组件，它应该（可以在2.2.0 +中配置）：


接受价值道具

使用新值
发出输入事件

或者，正如括号中的注释所示，您可以reconfigure your model使用change事件：

model: {
    prop: 'checked',
    event: 'change',
}

下面是一个使用默认模型的工作示例，发出input事件：

＆＃13;

Vue.component('myCheckbox', {
  props: ['value'],
  methods: {
    uVal: function(checkStatus) {
      this.$emit('input', checkStatus);
    }
  },
  template: '<span>' +
              '<input type="checkbox" @change="uVal($event.target.checked)">' +
              '<label>{{ value }}</label>' + 
            '</span>'
});

new Vue({
  el: '#app',
  data: {
    chicken: false,
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.3/vue.js"></script>
<div id="app">
  <my-checkbox v-model="chicken" value="Chicken"></my-checkbox>
  <p>Chicken: {{ chicken }}</p>
</div>

＆＃13;

Answer 2

没关系。我刚回答了自己的问题。这只是一个错字的情况。该模型应该是：

model: { prop: 'checked', event: 'change' }

而不是

model: { prop: 'checked', emit: 'change' }

VueJS v2指南。在非值属性上使用v-model

2 个答案: