vue.js update value when another value changes (data-binding)

That's where I change a value:

<div>
    <input type="text" id="global-tag1" v-model="liveTag1">
    <label for="global-tag1">label</label>
</div>

And I would like to update it everywhere here: Attention there are multiple of this pieces on my page. And I cannot do it with custom elements, I've done it and it worked but it takes to long to render the page.

 <div>
     <input name="someValue" value="{{$predefinedValue ?? ''}}" type="text" id="id1">
     <label for="id1">label</label>
 </div>

Now how do I achieve this with vue.js. Because I cannot simply set

value="{{liveTag1}}"

Then I do not have a predefined value.

InaniELHoussain

10 years ago

Level 32

you have no other way but to bind them via v-model="liveTag1"

ilarioengler

10 years ago

Best Answer

Level 3

Solution

@AkiyamaSmart

var vm = new Vue({
    el: 'body',

    data: {
        liveTag1: ''
    }
});

This will observe the liveTag1 and as soon as the data changes it will update the value of the given Selector.

vm.$watch('liveTag1', function(value) {
    $('[id^="someid"]').val(value);
});

1 like

Please or to participate in this conversation.