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

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

if (!error) this.events = newEvents

如果您希望仅在从Meteor方法接收JSON对象并填充到events数组后显示选择框，则只需将Vue条件绑定设置为布尔值以在数据后显示HTML DOM元素载满了。

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

在从Meteor回调中获取数据之前，Vue选择列表呈现

2 个答案: