我完全被困在这里 . 我正在尝试做一些非常简单的事情,我只想在每次输入密钥时执行 doSave
方法,这样我就可以使用新值保存到数据库中 . 这是包含模板的组件:
supplier = Vue.component('supplier', {
data() {
return {
editing: false
}
},
props: ['name', 'id', 'supplier_notes'],
delimiters: ['$[', ']]'],
template: `<li>
<input type="text" v-bind:value="name" v-if="editing" v-on:input="name=$event.target.value;doSave(id)" />
<span v-else>$[name]]</span>
<input type="text" v-bind:value="supplier_notes" v-on:input="supplier_notes=$event.target.value;doSave(id)" id="id_supplier_notes" />
</li>`,
methods: {
doSave(id) {
console.log(this.name, this.supplier_notes);
}
}
});
和使用中的组件:
<supplier
v-for="supplier in suppliers"
v-bind:name="supplier.name"
v-bind:id="supplier.id"
v-bind:supplier_notes="supplier.supplier_notes">
</supplier>
因为每次输入一个字符时都会收到警告,"[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: " supplier_notes“”( notes
字段也是如此)
如果我取出 supplier_notes=$event.target.value;
,则警告消失,但然后道具不会更新 . 它在我键入任何内容之前保留初始值 .
访问 this.supplier_notes
的正确方法是什么,没有警告?
Edit :根据所谓的重复,我将其添加到我的组件中:
data() {
return {
editing: false,
internal_name: this.name,
internal_supplier_notes: this.supplier_notes
}
},
并将我的doSave更改为此,以进行测试:
doSave(id) {
console.log(this.internal_name, this.internal_supplier_notes);
}
当我输入字段时,我在浏览器中反复得到 hello undefined
. fetch
为第一个字段加载的值是"hello",所以这告诉我什么都没有更新 .