为什么Vue.js输入值没有更新？
为什么Vue.js输入值没有更新？
提问于 2019-05-21 05:53:55
我有一个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是如何工作的，但看起来文本输入的值应该更新。任何建议/解释都将不胜感激。谢谢。
回答 2
Stack Overflow用户
发布于 2019-05-21 06:53:47
您不能像那样在组件之间变化值。
下面是一个关于如何正确地来回传递值的示例代码片段。您将需要使用computed 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>Stack Overflow用户
发布于 2019-05-21 06:20:09
从您的代码中，您正在尝试侦听更改。在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上的事件，请查看此处
绑定来自属性的值..
获取props值，然后将其赋给'inputValue‘变量
它将在输入元素中反映
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56228642
复制相关文章
相似问题