vue.js 当另一个值改变时更新值（数据绑定）

Question

那是我更改值的地方：

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

我想在这里更新它： 请注意，我的页面上有很多这样的文章。我不能用自定义元素来做到这一点，我已经做到了并且它有效但是呈现页面需要很长时间。

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

现在如何使用 vue.js 实现此目的。因为我不能简单地设置

value="{{liveTag1}}"

那我没有预定义的值。

Answer 1

您使用的是哪个版本的 Vue？在当前版本中你不能这样做：

value="{{liveTag1}}"

对于输入字段，您需要执行：

v-model="liveTag1"

然后如果你想将它设置为一个预定义的值，在你的 Vue 实例中：

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

Answer 2

解决方案

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

    data: {
        liveTag1: ''
    }
});

这将观察 liveTag1，一旦数据发生变化，它就会更新给定选择器的值。

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

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