我有一个带有一些数据的VueJS实例:
var vm = new Vue({ el: '#root', data: { id: '', name: { firstname: "", lastname: "", country: "", valueset: false }, // ...
在我的HTML中,我还有:
<input class="id" type="text" size="4" maxlength="4" v-model.lazy="id" v-on:change="create_casenr">
因此,在填充该字段之后,将create_casenr触发我的实例的方法。
create_casenr
create_casenr: function(event) { // update the full name of user $.ajax({ url: 'http://elk.example.com:9200/users/user/' + this.id }) .done(function(data) { console.log(data); this.name = data._source; this.name.valueset = true; console.log(this.name); }) // ...
发生的事情是:
data
this.name
name
我可以看到它没有被更新,因为依赖它的代码的其他部分看不到它。我还检查了VueJS Chrome插件id,除以外的所有变量均已正确设置(包括)name。
id
通过jQuery AJAX调用修改VueJS实例的数据时,是否有一种特定的方法?
this.nameAJAX成功处理程序中存在范围问题。
该this.name内部是不一样this.name在你的Vue公司的组成部分。因此,不会在Vue组件中设置您的名字。
您可以使用箭头功能来解决此问题:
$.ajax({ url: 'http://elk.example.com:9200/users/user/' + this.id }).done(data => { this.name = data._source; // 'this' points to outside scope this.name.valueset = true; });