我完全被困在这里 . 我正在尝试做一些非常简单的事情,我只想在每次输入密钥时执行 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",所以这告诉我什么都没有更新 .