VueJS v2指南。在非價值財產上使用V模型

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> 

這裏是我有這樣的代碼遠。

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

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

Answer 2

沒關係。我只是回答了我自己的問題。這僅僅是一個錯字。該模型應該讀過：

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

，而不是

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