我有一个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
是如何工作的,但看起来文本输入的值应该更新。任何建议/解释都将不胜感激。谢谢。
发布于 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>
发布于 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‘变量
它将在输入元素中反映
https://stackoverflow.com/questions/56228642
复制相似问题