Vue Multiselect 不加载数据

Question

问题：Vue Multiselect 未填充数据

基本说明：我正在使用 Vue Multiselect 作为应用程序计划的下拉列表。我能够将数据加载到 data 道具中 - 通过在 UI 中的多选正下方添加 <p>{{plans}}</p> 进行测试，它输出正确的数据，这是一个对象数组应该被多选阅读。

模板代码：

<multiselect v-model="plan" deselect-label="Can't remove this value" track-by="id" label="name" placeholder="Select a plan" :options="plans" :searchable="false" :allow-empty="false" :hide-selected="true"></multiselect>

脚本代码 - 精简：

import axios from 'axios';
export default {
  data() {
    return {
      plan: null,
      plans: null
    }
  },
  created() {
    axios.get('/billing/plansLoad', {})
    .then(plans => {
        this.plans = plans.data.plans
    })
  }
}

created部分我试过created、beforeCreate、beforeMount，好像都不行。

额外说明：我可以通过将数据粘贴到 API 调用返回的数据属性中来让多选输出正确的数据。

Answer 1

只要出现初始化竞争条件，即组件需要在首次渲染时提供数据，您可以使用 v-if 延迟渲染，直到数据准备就绪：

<multiselect v-if="plans"...

这样 <multiselect> 在数据可用之前根本不会呈现。

Vue Multiselect 不加载数据

Vue Multiselect doesn't load data

javascript

vue.js

vuejs2

vue-component

vue-multiselect