Javascript Vue.js数据绑定问题
我试图通过post请求绑定userDetails数组中的数据,但我没有得到数据,我尝试了stackoverflow和vue.js文档中给出的所有可能的解决方案,但我的代码对我没有任何帮助Javascript Vue.js数据绑定问题,javascript,vuejs2,Javascript,Vuejs2,我试图通过post请求绑定userDetails数组中的数据,但我没有得到数据,我尝试了stackoverflow和vue.js文档中给出的所有可能的解决方案,但我的代码对我没有任何帮助 ND.user_list = new Vue({ el: '#user_list', data: { userDetails: [] }, mounted: function () { $.post(ND.routes['users.get'], [], function(data) { //c
ND.user_list = new Vue({
el: '#user_list',
data: {
userDetails: []
},
mounted: function () {
$.post(ND.routes['users.get'], [], function(data) {
//console,log(data);
this.$set(this, 'userDetails', data);
//this.usersDetails = data;
}.bind(this), 'json');
//onsole.log(this.userDetailsdata);
}
});
我在控制台登录挂载函数中获取数据,但没有在数据中获取userDetails数组declare。这是我的查看代码
<div class="ui grid container" id="user_list">
顶级用户
#
名称
电子邮件
用户类型
行动
{%verbatim%}
1.
{{user.email}
行动
编辑
删除
{%endverbatim%}
提前感谢。回调fo
$中的此
。post()
不引用VueJS实例。这意味着This.userDetails
实际上将在回调中返回undefined。您可以做的是为VueJS实例创建代理,如下所示:
ND.user_list = new Vue({
el: '#user_list',
data: {
userDetails: []
},
mounted: function () {
// Proxy `this`
var that = this;
$.post(ND.routes['users.get'], [], function(data) {
// `that` will refer to VueJS instance
that.userDetails = data;
}, 'json');
}
});
您正在使用此。$set错误:仅当您在数据对象中获得了一个对象并希望向该对象添加以前不存在的属性时,或者如果您希望更改数组的索引,才应使用此选项。那么第一个参数不应该是vue对象,而是数据对象(即数据对象中的对象或数组)。请参阅此处的文档:或
而不是:
this.$set(this'userDetails',data)
您应该只做this.userDetails=data代码>。你试过这个吗?此外,如果您更改阵列中的元素,则应使用Vue.set或splice,但在使用之前请仔细阅读文档。您是否已经知道问题是在于获取数据还是将数据传递给Vue?是的,问题是将数据传递给Vue。我想您的设置数据不正确。它应该是Vue.set(object,key,value)
我已经尝试过了,但是它对我没有帮助,因为post函数回调中的这个
没有引用Vue实例。在挂载的回调中为它创建一个代理,例如var that=this
,并在回调后使用that.userDetails=…
。似乎原始代码中的.bind()
也应该处理这个问题。
ND.user_list = new Vue({
el: '#user_list',
data: {
userDetails: []
},
mounted: function () {
// Proxy `this`
var that = this;
$.post(ND.routes['users.get'], [], function(data) {
// `that` will refer to VueJS instance
that.userDetails = data;
}, 'json');
}
});