[英]vue.js element selected by focus is not reactive
我有一个监听器来检查最后选择了什么输入,以便稍后添加某种字符串/变量。
created: function () {
document.addEventListener('focusin', this.focusChanged);
}
focusChanged(event) {
if (event.target.id !== 'variable-search') {
this.lastElement = event.target;
}
}
这似乎工作正常,当我单击输入字段时, this.lastElement
会使用焦点元素进行更新。 所有这些输入都有一个v-model
,它可以是对象中的字符串,也可以是纯字符串。
现在问题是当我尝试通过以下方式更新值时:
this.lastElement.value += variable;
Vue 不会检测到它的变化,同样在 Vue 开发者工具中,字符串也不会被更新。 但是在输入字段中它确实得到了更新。 所以这应该是一个反应性的事情。
当我在输入字段(v-model)中添加一个新字符时,它会再次更新。 所以只是当我通过this.lastElement
更新字符串时,它不会注册它的更改。
问题是输入字段是动态的,所以我不知道这里有多少个输入字段,有多少个列表等。所以我需要 Vue 在lastElement
的值更新后重新渲染变量。
编辑
我只是用@focus在这里尝试了一个例子
<input v-model="testVar" @focus="lastElement = testVar">
如果我稍后更新lastElement
,它不会为testVar
更新它,而只是为lastElement
更新它。
您可以为每个输入添加一个ref
属性,并使用 ref 更新它们的值。 例如,输入元素可以是:
<input v-model="testVar" ref="input1" id="input1" @focus="focusChanged">
在你的方法中:
methods: {
focusChanged(event) {
if (event.target.id !== 'variable-search') {
this.lastElement = event.target.id;
}
},
}
以及要更新值的位置: this.$refs[this.lastElement].value += variable;
以编程方式更改 DOM 元素中的值不会触发 DOM 事件。 v-model
依赖input
(或使用.lazy
时change
)事件来更新其绑定变量。 如果您在更新输入中的值时调度这些事件,则变量将做出反应。
new Vue({ el: '#app', data: { items: ['one','two','three'] }, methods: { addAddress() { this.lastElement.value += 'address'; this.lastElement.dispatchEvent(new Event('input')); this.lastElement.dispatchEvent(new Event('change')); }, focusChanged(event) { this.lastElement = event.target; } } })
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script> <div id="app"> <div v-for="item, index in items"> <input v-model="items[index]" @focus="focusChanged"> {{item}} </div> <button type="button" @click="addAddress">+address</button> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.