Vue.js 在渲染组件之前填充数据
Posted
技术标签:
【中文标题】Vue.js 在渲染组件之前填充数据【英文标题】:Vue.js fill data before render component 【发布时间】:2017-07-23 19:08:48 【问题描述】:我是 Vue.js 的新手,我正在尝试创建一个包含在 selectList 中的简单组件但没有成功,我正在尝试填充其选项数据以模拟 Ajax 请求,这是我的代码:
<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 在渲染组件之前填充数据的主要内容,如果未能解决你的问题,请参考以下文章