從Vue.js中的方法設置數據

Question

我正在嘗試從方法設置數據。 我正在使用訪存來獲取剩余數據。 但是，當我嘗試設置數據時，使用this.item ='test'不起作用。 因此，當我的this.item位於“ .then”內部時，它不起作用。 但是，當“ .then”不在工作狀態時...但是我需要使用rest調用來獲取數據...

Vue.component('internal_menu', {
   props: ['list'],
   data: function () {
      return {
         item: '1'
      }
   },
methods: {
   teste(event)
   {
       event.preventDefault();
       var payload = {
           method: 'GET',
           headers: { "Accept": "application/json; odata=verbose" },
           credentials: 'same-origin'    // or credentials: 'include'  
       }
       const url = _spPageContextInfo.webAbsoluteUrl + 
       "/_api/Web/Lists/GetByTitle('"+ this.list +"')/Items? 
       $select=Title,Id,Link,Icone&$orderby=Title%20asc";
       fetch(url,payload)
          .then((resp) => resp.json())
          .then(function(data) 
          {
              let items = data.d.results;
              this.item = 'teste';// this not working here
          })
        . catch(function(error) {
             console.log(JSON.stringify(error));
          });
          this.item = 'tst123'; //this working here
     },

 },
 template: `
    <div id='tst'>
       <h3>{{list}} - {{item}}</h3>
        <button v-on:click="teste">Try Me</button>
    </div>
`,
 mounted: function () {
    this.getMenuData();
 }
})

new Vue({
   el: "#app"
})

謝謝埃弗頓

Answer 1

執行此操作時：

.then(function(data) 
      {
          let items = data.d.results;
          this.item = 'teste';// this not working here
      })

閉包this的引用是在匿名函數的上下文中。 相反，您需要使用fat arrow功能以維護Component的上下文。

.then((data) => {
    let items = data.d.results;
    this.item = 'test';
})