gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-30 22:11:33 26 4
gpt4 key购买 nike

我是 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"
});

我的 fiddle :https://jsfiddle.net/3ypk60xz/2/

感谢任何帮助

最佳答案

您遇到范围界定问题。请记住,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;
});
}

这是使用箭头函数更新的 fiddle :https://jsfiddle.net/mrvymzgh/

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

关于jquery - Vue.js 在渲染组件前填充数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42582847/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com