vue.js 焦点选择的元素不是反应性的
vue.js element selected by focus is not reactive
我有一个侦听器来检查最后选择了什么输入,以便稍后添加某种 string/variable。
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 在 [=17 的值之后重新渲染变量=] 已更新。
编辑
我刚刚用@focus 试了一下,举个例子
<input v-model="testVar" @focus="lastElement = testVar">
如果我稍后更新 lastElement
,它不会为 testVar
更新,而只会为 lastElement
.
更新
您可以向每个输入添加 ref
attribute 并使用 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>
我有一个侦听器来检查最后选择了什么输入,以便稍后添加某种 string/variable。
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 在 [=17 的值之后重新渲染变量=] 已更新。
编辑
我刚刚用@focus 试了一下,举个例子
<input v-model="testVar" @focus="lastElement = testVar">
如果我稍后更新 lastElement
,它不会为 testVar
更新,而只会为 lastElement
.
您可以向每个输入添加 ref
attribute 并使用 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>