从 VUE.js 中的方法设置数据中的对象

Posted 2023-02-22

【中文标题】从 VUE.js 中的方法设置数据中的对象

【英文标题】：Set object in data from a method in VUE.js

【发布时间】：2017-12-05 18:16:12

【问题描述】：

我已经被这个问题困扰了 2 个小时，我似乎真的无法让它工作。

const app = new Vue(
  el: '#book-search',
  data: 
    searchInput: 'a',
    books: ,
  ,
  methods: 
    foo: function () 
      axios.get('https://www.googleapis.com/books/v1/volumes', 
        params: 
          q: this.searchInput
        
      )
      .then(function (response) 
        var items = response.data.items
        for (i = 0; i < items.length; i++) 

          var item = items[i].volumeInfo;

          Vue.set(this.books[i], 'title', item.title);   

        
      )
      .catch(function (error) 
        console.log(error);
      );

    
  
);

当我启动搜索和 API 调用时，我希望将值传递给数据，以便最终结构类似于下面的结构。

data: 
  searchInput: '',
  books: 
    "0": 
       title: "Book 1"
     ,
    "1": 
       title: "Book 2"
     
,

目前我收到Cannot read property '0' of undefined。

【问题讨论】：

this的值在axios .then()方法的回调函数中不同。在回调范围内使用之前，您必须将 this 的值保存在外部。

@abhishekkannojia 如果我将其更改为 app，这就是我的 Vue 实例的定义方式，它会引发 Cannot convert undefined or null to object 错误。

Axios can't set data的可能重复

请注意，这是关于“传统”javascript 对象（字典），而不是使用 new Set() 创建的实际 Set 对象 - 我来这里是为了了解 Vue 如何处理这些...跨度>

【参考方案1】：

问题出在这里：

Vue.set(this.books[i], 'title', item.title);

你在回调上下文中，this 的值并不是你所期望的 Vue 对象。解决这个问题的一种方法是预先保存this 的值并在回调函数中使用它。

也不要使用Vue.set()，而是尝试直接更新书籍对象。

const app = new Vue(
  el: '#book-search',
  data: 
    searchInput: 'a',
    books: ,
  ,
  methods: 
    foo: function () 
      var self = this;
      //--^^^^^^^^^^^^ Save this
      axios.get('https://www.googleapis.com/books/v1/volumes', 
        params: 
          q: self.searchInput
          //-^^^^--- use self instead of this
        
      )
      .then(function (response) 
        var items = response.data.items
        var books = ;
        for (i = 0; i < items.length; i++) 

          var item = items[i].volumeInfo;
          books[i] =  'title' : item.title ;
        
        self.books = books;
      )
      .catch(function (error) 
        console.log(error);
      );

    
  
);

或者如果你想使用Vue.set()，那么使用这个：

Vue.set(self.books, i, 
     'title': item.title
);

希望这会有所帮助。

【讨论】：

嘿，感谢您的帮助，这很有意义，但我仍然收到 Cannot convert undefined or null to object 错误。

这对我有帮助。谢谢。

【参考方案2】：

是的，问题在于上下文。 “this”返回的不是您期望的返回值。

你可以使用

让 self = this;

或者你可以使用绑定

function()this.method.bind(this);

第二种方法更好。

还可以在 Google 上搜索“如何在 js 中定义上下文”、“绑定调用应用 js”之类的内容 - 这将帮助您了解发生了什么问题。

【参考方案3】：

// update component's data with some object's fields
// bad idea, use at your own risk

Object
  .keys(patch)
  .forEach(key => this.$data[key] = patch[key])