Как настроить реактивность текстового поля в Vue.js - PullRequest
Новая
       8

Как настроить реактивность текстового поля в Vue.js

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

У меня есть простое текстовое поле в Vue.js: 

new Vue({
  el: '#app',
  data: {
    value: 'Test'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="value" ref="input" />
  <p>{{ value }}</p>
</div>

Можно ли уменьшить частоту обновления значения в модели данных с 'onChange' до 'onBlur'?

Ответы [ 2 ]

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

Да, вам следует просто добавить @blur событие и передать через него значение события

Затем, когда это событие сработает в methods, оно изменит значение result навходное значение ... таким образом, обновление стало обусловлено только blur из ввода 

new Vue({
  el: '#app',
  data: {
    result: '',
    value:''
  },
  methods:{
  	blo(e){
    	this.result = e
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="app">
  <input type="text" @blur='blo(value)' v-model="value" />
  <p>{{ result }}</p>
</div>
</div>
0 голосов
/ 15 февраля 2019

v-модель является просто синтаксическим сахаром для =>

: значение = "modelValue" @ input = "modelValue = $ event.target.value"

Если вы хотите что-то еще, это очень легко сделать.Просто измените сторону обновления на onBlur, поэтому => 

<input  class="form-control
    :value="value" 
    @blur="value = $event.target.value"
    @input="value = $event.target.value"
>

Улучшенный пример кода: 

new Vue({
  el: '#app',
  data: {
    value: 'Test'
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
    type="text"
    :value="value"
    @blur="value = $event.target.value"
    ref="input"
    />
  <p>{{ value }}</p>
</div>
...