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

Question

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.

Ilario Engler · Accepted Answer · 2016-02-27 15:02:33Z

1

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

answered Feb 27, 2016 at 15:02

Ilario Engler

2,4974 gold badges31 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Desi Cochrane · Accepted Answer · 2016-02-27 14:35:50Z

0

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

answered Feb 27, 2016 at 14:35

Desi Cochrane

6671 gold badge8 silver badges14 bronze badges

1 Comment

Ilario Engler Over a year ago

thanks for your anwser, is not possible to predefine the value in the Vue instance, because it could be up to 1000 elements so I don't wanna write so much data attributes. I solved it with vm.$watch and used normal jquery to change the other values

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related