当绑定的输入字段的值被 JavaScript 更改时自动更新 vue.js 数据
Update vue.js data automatically when binded input field's value is changed by JavaScript
我是 vue.js 的新手。 vue.js的Two-way binding似乎只监听用户的输入事件,如果你通过JS更改值,vue.js的值不会更新
这是我的意思的一个例子:
function setNewValue() {
document.getElementById('my-field').value = 'New value';
}
new Vue({
el: '#app',
data: {
message: 'Old value'
}
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
</div>
<button onclick="setNewValue()">Set new value</button>
如果单击 "Set new value" 按钮,该字段的值将更改为 "New value",但其上方的文本仍为 "Old value" 而不是 "New value"。但如果直接更改字段中的文本,则上面的文本会同步更改。
在使用 JavaScript 更新值时,我们是否可以同步执行此操作?
使用 $set
而不是直接访问 DOM 元素。不要通过 DOM API.
改变模型
function setNewValue() {
app.$set(app.$data, 'message', 'New value');
}
var app = new Vue({
el: '#app',
data: {
message: 'Old value'
}
});
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
</div>
<button onclick="setNewValue()">Set new value</button>
除了使用$set
,如@taggon 所建议的,您还可以直接使用数据模型。
function setNewValue() {
model.message = 'New value';
}
var model = {
message: 'Old value'
},
app = new Vue({
el: '#app',
data: model
});
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
</div>
<button onclick="setNewValue()">Set new value</button>
或者更好的是,使用 Vue 实例的方法操作数据,并使用 v-on:
来处理 click
事件:
var app = new Vue({
el: '#app',
data: {
message: 'Old value'
},
methods: {
setNewValue: function () {
this.message = 'New value';
}
}
});
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
<button v-on:click="setNewValue">Set new value</button>
</div>
在这种情况下,button
必须是 app
模板的一部分,否则 v-on:
事件绑定不起作用。
我是 vue.js 的新手。 vue.js的Two-way binding似乎只监听用户的输入事件,如果你通过JS更改值,vue.js的值不会更新
这是我的意思的一个例子:
function setNewValue() {
document.getElementById('my-field').value = 'New value';
}
new Vue({
el: '#app',
data: {
message: 'Old value'
}
})
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
</div>
<button onclick="setNewValue()">Set new value</button>
如果单击 "Set new value" 按钮,该字段的值将更改为 "New value",但其上方的文本仍为 "Old value" 而不是 "New value"。但如果直接更改字段中的文本,则上面的文本会同步更改。
在使用 JavaScript 更新值时,我们是否可以同步执行此操作?
使用 $set
而不是直接访问 DOM 元素。不要通过 DOM API.
function setNewValue() {
app.$set(app.$data, 'message', 'New value');
}
var app = new Vue({
el: '#app',
data: {
message: 'Old value'
}
});
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
</div>
<button onclick="setNewValue()">Set new value</button>
除了使用$set
,如@taggon 所建议的,您还可以直接使用数据模型。
function setNewValue() {
model.message = 'New value';
}
var model = {
message: 'Old value'
},
app = new Vue({
el: '#app',
data: model
});
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
</div>
<button onclick="setNewValue()">Set new value</button>
或者更好的是,使用 Vue 实例的方法操作数据,并使用 v-on:
来处理 click
事件:
var app = new Vue({
el: '#app',
data: {
message: 'Old value'
},
methods: {
setNewValue: function () {
this.message = 'New value';
}
}
});
<script src="https://cdn.jsdelivr.net/vue/latest/vue.js"></script>
<div id="app">
<p>{{ message }}</p>
<input id="my-field" v-model="message">
<button v-on:click="setNewValue">Set new value</button>
</div>
在这种情况下,button
必须是 app
模板的一部分,否则 v-on:
事件绑定不起作用。