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';
})

从Vue.js中的方法设置数据

1 个答案: