为什么 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 的value明显从1变为2 ，我可以在父组件中确认这一点。

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

Answer 1

你不能像这样在组件之间改变值。

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

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

Answer 2

从您的代码中，您尝试收听 v-model 数据中的更改.. // 您的 Vue 组件

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

<script>
    export default {
        props: ['name', 'value'],
        data: function () {
            return {
                inputValue: ""
            };
        },
        
    };
</script>

如果你真的想听变化..

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

在您的组件文件中

<template>...</template>
<script>
    export default {
        props: ['name', 'value'],
        data: function () {
            return {
                inputValue: ""
            };
        },
        methods : {
    _keyUp : () => {// handle events here}

    };
</script>

在此处检查输入事件

从道具绑定值..

获取道具值，然后将其分配给“inputValue”变量

它将反映在输入元素中