第二次触发Vue Ajax时，虽然在JQuery对象中进行了数据更新，但数据并未在vuejs2中绑定
第二次触发Vue Ajax时，虽然在JQuery对象中进行了数据更新，但数据并未在vuejs2中绑定
提问于 2019-05-31 06:07:19
因此，我尝试使用vuejs2 v-type=，通过调用一个JQuery Ajax 'get‘函数，将一个值绑定到一个HTML input get“checkbox”元素。该值第一次正确绑定，但之后它什么也不做，它还取消选中输入type="checkbox“。
...<input type="checkbox" id="notification" class="custom-control-input" v-model="checked" />...
... <button class="btn btn-primary" type="button" onclick="getSettings()">Update</button>...
<script>
function getSettings()
{
$.ajax({
type: "GET",
url: "../../handler/getSettings.ashx",
contentType: "application/json; charset=utf-8",
data: {
},
async:false,
success: function (result) {
var app = new Vue({
el: '#notification',
data: {
checked: result.Notification
}
});
console.log(app.checked);
},
error: function (err) {
}
});
};
</script>我希望被选中，但如果我(第二次以后)重新运行代码(通过调用getSettings())，input type="checkbox“取消选中并保持取消选中状态。我可以确认代码已经执行了，因为控制台日志返回了一个'true‘。
回答 1
Stack Overflow用户
发布于 2019-05-31 06:19:56
所以它看起来就像你发送的每个请求--你构建了一个新的VueJS对象，它销毁了你保存的所有数据。Vue的功能非常强大，它允许你在对象本身中声明方法。如下所示。
Vue对象也有生命周期事件！它允许你把像"mounted“这样的东西放到Vue对象中。当Vue对象附加到html页面时，将调用Mounted。
看看下面的返工和文档。之后。
<script>
var app = new Vue({
el: '#notification',
data: {
checked: false
},
methods:{
getSettings(){
$.ajax({
type: "GET",
url: "../../handler/getSettings.ashx",
contentType: "application/json; charset=utf-8",
data: {},
async:false,
success: function (result) {
this.checked = result.Notification;
console.log(app.checked);
},
error: function (err) {
}
});
}
},
mounted(){
this.getSettings();
}
});
</script我还没有测试过这个。但它应该能行得通。
我建议看一下：https://vuejs.org/v2/guide/向下滚动一点，你会看到一些涉及方法的例子。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56386232
复制相关文章
相似问题
腾讯云开发者
