javascript - 为什么 Vue.js 输入值没有更新？

Question

我有一个 Vue.js text-input 组件，如下所示:

<template>
    <input
        type="text"
        :id="name"
        :name="name"
        v-model="inputValue"
    >
</template>

<script>
    export default {
        props: ['name', 'value'],
        data: function () {
            return {
                inputValue: this.value
            };
        },
        watch: {
            inputValue: function () {
                eventBus.$emit('inputChanged', {
                    type: 'text',
                    name: this.name,
                    value: this.inputValue
                });
            }
        }
    };
</script>

我在另一个组件中使用该text-input，如下所示:

<ul>
    <li v-for="row in rows" :key="row.id">
        <text-input :name="row.name" :value="row.value">
        </text-input>
    </li>
</ul>

然后，在使用 text-input 的组件的 JS 中，我有如下代码用于删除 li 行:

this.rows = this.rows.filter((row, i) => i !== idx);

filter 方法正确地从 rows 数组中删除索引为 idx 的行，并且在父组件中，我可以确认该行确实消失了，但是，例如，如果我有两行，第一行的值为 1，第二行的值为 2 ，然后删除第一行，即使剩余行的值为 2，我仍然在文本输入中看到 1。

为什么？我不明白为什么 Vue.js 没有更新文本输入的值，即使 value 的值明显从 1 更改为 2，我可以在父组件中确认这一点。

也许我只是不理解 Vue.js 和 v-model 的工作原理，但文本输入的值似乎应该更新。任何建议/解释将不胜感激。谢谢。

Answer 1

您不能像这样改变组件之间的值。

以下是有关如何正确来回传递值的示例片段。您将需要使用计算的 setter/getter。添加了一个按钮来更改值并将其反射(reflect)回实例。它适用于两个方向。

<template>
    <div>
        <input type="text" :id="name" v-model="inputValue" />
        <button @click="inputValue='value2'">click</button>
    </div>
</template>
<script>
    export default {
        props: ['name', 'value'],
        computed: {
            inputValue: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit('updated', val);
                }
            }
        }
    }
</script>

请注意，“@updated”事件用更新后的值更新回局部变量:

    <text-input :name="row.name" :value="row.value" @updated="item=>row.value=item"></text-input>