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

Question

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

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

<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

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

​

<template>
  <select v-if="dataLoaded"> </select>
</template>

<script>
return {
  data() {
    return {
      dataLoaded: false
    }
  }

  asyncMethod() { this.dataLoaded = true; }
};
</script>

​