Vue.js, показывающий div на событии ввода, удаляет текст из ввода - PullRequest
Новая
       5

Vue.js, показывающий div на событии ввода, удаляет текст из ввода

0 голосов
/ 10 ноября 2018

Я борюсь со следующим, пытаясь заставить div показываться под текстовым вводом после того, как кто-то начинает вводить:

https://jsfiddle.net/chadcf/3vjn71ap/

Шаблон: 

<div id="app">
  <input id="foo"
       name="foo"
       :value="localValue"
       type="text"
       placeholder=""
       autocomplete="off"
       @input="handleInput"
  >
  <div v-if="show">Testing</div>
</div>

Со следующим кодом Vue: 

new Vue({
  el: "#app",
  data() {
    return {
      show: false,
      localValue: null
    }
  },
  methods: {
    handleInput(e) {
      this.show = true;
    },
  }
});

Когда вы запускаете это, если вы вводите символ в текстовом вводе, действительно показывается div под ним. Но кроме того, персонаж, которого вы только что набрали, исчезает После этого первого персонажа все работает нормально.

Я думаю, что здесь происходит то, что, когда ввод начинается и устанавливает this.show = true, это происходит до того, как значение действительно обновляется. Я думаю ... И, таким образом, vue повторно отображает данные, но без значения. Но на самом деле я не уверен, что делать, чтобы справиться с этим правильно ...

Ответы [ 2 ]

0 голосов
/ 10 ноября 2018

Это происходит потому, что localValue не обновляется вашими данными. Когда вы начнете вводить show, будет установлено значение true, поэтому Vue обновит DOM, чтобы показать ваш скрытый div. Но поскольку localValue равно нулю, когда DOM обновляет ваш ввод, он будет пустым, поскольку его значение привязано к localValue. Вы можете убедиться в этом, сделав handleInput переключить значение show вместо того, чтобы установить его в true, и вы увидите, что каждый раз, когда вы вводите что-то в поле ввода, видимость скрытого div будет переключаться при обновлении DOM, но ввод будет очищен .. 

 methods: {
    handleInput(e) {
      this.show = !this.show;
    },
  }

Таким образом, чтобы решить эту проблему, вы должны убедиться, что localValue обновляется вашим вводом. Самый простой способ - использовать v-model .. 

<div id="app">
  <input id="foo"
       name="foo"
       v-model="localValue"
       type="text"
       placeholder=""
       autocomplete="off"
       @input="handleInput"
  >
  <div v-if="show">Testing</div>
</div>

JSFiddle

В качестве альтернативы вы можете вручную обработать ввод в вашем методе handleInput и установить localValue на введенное значение, как Austio, упомянутый в его ответе.

0 голосов
/ 10 ноября 2018

Привет, значит, вы достаточно близки к этой мысли. Когда вы обрабатываете ввод самостоятельно, вы должны установить новое значение, когда у вас есть новый ввод. В вашем конкретном случае localValue всегда будет нулевым, что, как я думаю, вам не нужно. Я думаю, что вы хотите что-то еще, как это. 

 methods: {
    handleInput(e) {
      this.localValue = e.target.value;
      this.show = true;
    },
  }
...