vuejs v-model 让它只从一个地方改变

Question

hi i have vuejs2 code with laravel blade .. now my problem is that i have this vuejs2 code

new Vue({
    el:'.add_item_to_price_menu',
    data:{
        percentage:null,
    },
    methods:{
        searchData:function(){
            console.log(this.percentage);
        }
    }
});

and this is my blade code

<input type='text' @keyup='searchData' v-model='percentage' id='percentage' placeholder='{{trans("language.percentage")}}' class='form-control parent' />

<input v-model='percentage' type='text' class='form-control child' />
<input v-model='percentage' type='text' class='form-control child' />

now what i want is change the parent class change the values on every child and this is working with me but when i change in child i dont want it change in every anther model percentage is there any way to do that thanks

Answer 1

A simple way would be not to use v-model , just :value=percentage .

v-model is syntactic sugar to using a prop and an event. From Vue docs :

the [...] component must:

• Bind the value attribute to a value prop
• On input, emit its own custom input event with the new value

So if you only use :value then it's a one way binding. Just take into account that if the user changes one of those inputs, it won't be reflected in your model.