Vue.js在渲染组件之前填充数据

Question

我是Vue.js的新手，我试图创建一个没有成功的简单组件，它包含一个selectList，我试图填充它的选项数据来模拟Ajax请求，这是我的代码：

HTML

<div id="app"> 
    <my-select></my-select> 
</div> 

<template id="my-template"> 
    <div> 
    <select v-model="team"> 
     <option v-for="n in teams" v-bind:value="n.id"> 
     {{n.name}} 
     </option> 
    </select> 
    <p>Selected Team: {{team}}</p> 
    </div> 
</template> 

JS

Vue.component("my-select", { 
    template: "#my-template", 

    mounted: function() { 
     this.getTeams().then(function(data) { 
      this.teams = data; 
     }); 
    }, 

    data: function() {  
     return { 
      team: 0, 
      teams: [] 
     } 
    }, 

    methods: { 
     getTeams: function() { 
      var d = $.Deferred(); 
      setTimeout(function() { 
       var teams = [ 
        {id: 1, name: "Real Madrid"}, 
        {id: 2, name: "Bayern München"} 
       ]; 

       d.resolve(teams); 
      }, 2000); 

      return d.promise(); 
     } 
    } 
}); 

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

我的小提琴：https://jsfiddle.net/3ypk60xz/2/

我很感谢任何帮助

Answer 1

您有一个范围界定问题。请记住，function()在匿名声明时创建它自己的范围，所以this引用该函数。为了解决这个问题或者使用箭头功能（如果使用ES6）或设置指向正确的上下文的变量：var self = this：

ES6

mounted: function() { 
    this.getTeams().then(data => { 
     this.teams = data; 
    }); 
    } 

ES5

mounted: function() { 
    var self = this; 
     this.getTeams().then(function(data) { 
      self.teams = data; 
     }); 
    } 

以下是您使用箭头功能更新的小提琴：https://jsfiddle.net/mrvymzgh/

而在ES5中：https://jsfiddle.net/mrvymzgh/1/

Answer 2

任何具体的原因，你想使用承诺，你可以这样做，就像this。

Vue.component("my-select", { 
    template: "#my-template", 

    mounted: function() { 
    this.getTeams(); 
    }, 

    data: function() {  
    return { 
     team: 0, 
     teams: [] 
    } 
    }, 

    methods: { 
    getTeams: function() { 
     setTimeout(() => { 
     this.teams = [ 
      {id: 1, name: "Real Madrid"}, 
      {id: 2, name: "Bayern München"} 
     ];   
     }, 2000); 

    } 
    } 
}); 

代码我纠正在setTimeout的，它不使用（）函数的语法 我开始使用箭头语法，不建立了自己的this范围。原因如下：this answer。