Vue 在从 Meteor 回调获取数据之前选择列表渲染

Question

我正在尝试从流星调用填充我的事件数组，以便它显示在选择列表中。Meteor 函数"get.upcoming"返回一个 JSON 对象数组，但我认为选择列表是在填充事件数组之前呈现的。

有没有办法重新呈现选择框或仅在填充事件数组后呈现它？

<template>
<div class="container">
<select v-model='eventId'>
<option v-for='event in events'>{{JSON.stringify(event)}}</option>
</select>
</div>
</template>
<script>
export default {
data() {
return {
eventId: "",
events: [],
}
},
created() {
this.getItems();
},
methods: {
getItems() {
console.log("getting items");
Meteor.call('get.upcoming', function(err, res) {
if (err) {
console.log(err);
} else {
events = res;
console.log(events);
}
})
}
}
}
</script>
<style>
</style>

Answer 1

在Meteor 调用回调函数中使用this.events = res;将响应保存到events。

另外，使用箭头函数进行回调，以便它可以通过this访问 Vue 实例。

getItems() {
console.log('getting items');
Meteor.call('get.upcoming', (err, res) => {
if (err) {
console.log(err);
} else {
this.events = res;
console.log(this.events);
}
})
}

Answer 2

1. 要重新渲染选择框，只需设置双向绑定到选择框的数据数组即可重新渲染给定的选择框。一旦网页加载，Vue 模板定义中data()方法中的所有注册变量都可以作为模板类变量使用，其内容可以选择双向绑定到组件。

if (!error) this.events = newEvents

2. 如果你想只在从 Meteor 方法接收 JSON 对象并填充到事件数组中后显示选择框，那么只需将 Vue 条件绑定设置为布尔值，以在加载数据后显示 HTML DOM 元素。

<template>
<select v-if="dataLoaded"> </select>
</template>
<script>
return {
data() {
return {
dataLoaded: false
}
}
asyncMethod() { this.dataLoaded = true; }
};
</script>