Элемент vue.js, выбранный фокусом, не реагирует - PullRequest
Новая
       28

Элемент vue.js, выбранный фокусом, не реагирует

0 голосов
/ 01 февраля 2019

У меня есть слушатель, чтобы проверить, какой ввод был выбран в конце, чтобы потом добавить в него какую-то строку / переменную. 

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.

Редактировать

Я только что попробовал с @сфокусируйтесь здесь на примере 

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

Если я обновлю lastElement позже, он обновит его не для testVar, а только для lastElement.

Ответы [ 2 ]

0 голосов
/ 01 февраля 2019

Изменение значений в элементах 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>
0 голосов
/ 01 февраля 2019

Вы можете добавить атрибут 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;

...