CODEWITHSUNDEEP
data-bindingvue.js
Ilario Engler
Ilario Engler

Reputation: 2469

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.

Upvotes: 0

Views: 2881

Answers (2)

Ilario Engler
Ilario Engler

Reputation: 2469

Solution

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);
});

Upvotes: 1

Desi Cochrane
Desi Cochrane

Reputation: 657

Which version of Vue are you using? On current version you cannot do:

value="{{liveTag1}}"

for input fields, you need to do:

v-model="liveTag1"

Then if you want to set it to a predefined value, in your Vue instance:

Vue({
    data: {
        liveTag1: "something"
    }
})

Upvotes: 0

Related Questions