Question

我有一个侦听器来检查最后选择了什么输入，以便稍后在其中添加某种字符串/变量。

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 Developer工具中，字符串也不会更新。但是在输入字段中确实会更新。所以这应该是一种反应性的东西。

当我在输入字段（v模型）中添加新字符时，它会再次更新。因此，只是当我用this.lastElement更新字符串时，它不会注册其更改。

问题在于输入字段是动态的，所以我不知道这里有多少输入字段以及有多少列表等。因此，我需要Vue在lastElement的值之后重新呈现变量。已更新。

修改

我只是在这里以@focus为例进行了尝试

<input v-model="testVar" @focus="lastElement = testVar">

如果稍后再更新lastElement，则不会为testVar进行更新，而只是为lastElement进行更新。

Answer 1

您可以为每个输入添加一个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;

Answer 2

以编程方式更改DOM元素中的值不会导致触发DOM事件。 v-model依赖于input（或使用change时的.lazy）事件来更新其绑定变量。如果您在更新输入中的值时调度这些事件，则变量将做出反应。

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>

焦点选择的vue.js元素不是被动的

2 个答案: