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/

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

1 个答案: