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

【问题标题】：VueJS v2 Guide. Using v-model on non-value propertyVueJS v2 指南。在非值属性上使用 v-model
【发布时间】：2017-06-04 23:26:38
【问题描述】：

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

我尝试创建一个最小的示例，但未能成功。

我需要进行哪些更改，以便按照 VueJS 指南的建议，以下两个 HTML 语句可以互换？：

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

和

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

这是我目前得到的代码。

// 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 };
  }
});

<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>

【问题讨论】：

标签： vue.js

【解决方案1】：

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

因此，要让组件与 v-model 一起使用，它应该（这些可以在 2.2.0+ 中配置）：

接受一个价值道具

使用新值发出输入事件

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

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

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

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,
  }
});

<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>

【讨论】：

【解决方案2】：

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

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

而不是

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

【讨论】：