2

我有一个 Vue.jstext-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>

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

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

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

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

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

4

2 回答 2

4

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

这是有关如何正确来回传递值的示例片段。您将需要使用计算的 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>
于 2019-05-20T22:53:47.327 回答
0

从您的代码中，您尝试收听 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”变量

它将反映在输入元素中

于 2019-05-20T22:20:09.070 回答