所以我有这样的多个代码:
<input id="data" type="text" v-model="data">
<label for="data">Data</label>
我试图用它制作一个属性,这样我每次都不会重复它:
Vue.component('textbox', {
template: `
<div>
<input :id="id" type="text" v-model="value">
<label :for="id">{{ label }}</label>
</div>
`,
props: [
"id", "value", "label", "for"],
watch: {
value: function(newVal){
this.$emit('input', newVal)
}
}
})
并在我的html中访问它:
<textbox v-model="data" id="someID" label="Data"></textbox>
一切正常但每次我输入文本框时都会在控制台中收到此警告:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
(found in component <textbox>)
有没有办法删除该警告信息?或者我做错了吗?任何帮助将不胜感激。
答案 0 :(得分:2)
您根本不需要使用手表。而不是使用v-model,试试这个:
<input :id="id" type="text" :value="value" @input="$emit('input', $event.target.value)">