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

Posted

技术标签:

【中文标题】Vue.js 在渲染组件之前填充数据【英文标题】:Vue.js fill data before render component 【发布时间】:2017-07-23 19:08:48 【问题描述】:

我是 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/

感谢您的帮助

【问题讨论】:

【参考方案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/

【讨论】:

以上是关于Vue.js 在渲染组件之前填充数据的主要内容,如果未能解决你的问题,请参考以下文章

Vue.js - 组件模板不使用 v-for 渲染

从 vue.js 3 中传递数据的方法渲染组件

Vue.js 中父级数据更改时如何重新渲染内部组件

Vue.js 使用父数据渲染子组件

初学Vue.js:props

Vue.js - 父级基于无渲染子数据生成组件