如何在Vue.js中调整文本字段反应性

Question

I have a simple text field in 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> 

Is it possible to decrease the frequency of updating the value in the data model from 'onChange' to 'onBlur'?

Answer 1

v-model is just syntax sugar for =>

:value="modelValue" @input="modelValue = $event.target.value"

If you want something else, it's very easy to do. Just change the update side to onBlur, so =>

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

The improved example code:

 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> 

Answer 2

Yes, you should Just add @blur event, and pass through it the value of the event

Then when this event gets triggered in methods , it will change the value of result to the input value...so the updating became only conditioned to blur of the input

 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>