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方法已从idx数组中正确删除索引为rows的行，在父组件中，我可以确认该行确实消失了，但是，例如，如果我有两行，则第一行的值为1，第二行的值为2，然后我删除第一行，即使其余行有值为2，我仍然在文本输入中看到1。

为什么？尽管value的值显然已从1更改为2，但我不理解Vue.js为什么不更新文本输入的值，我可以确认在父组件中。

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

Answer 1

您正在尝试从代码中侦听v模型数据中的更改。 //您的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>

在此处检查有关输入here的事件

绑定道具的价值。

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

它将反映在输入元素中

Answer 2

您不能在这样的组件之间更改值。

以下是有关如何正确地来回传递值的示例代码段。您将需要使用计算的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>

为什么Vue.js输入值不更新？

2 个答案: