1

问题：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 调用返回的数据道具来让多选输出正确的数据。

4

1 回答 1

0

每当存在组件在第一次渲染时需要数据的初始化竞争条件时，您可以使用v-if延迟该渲染直到数据准备好：

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

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

于 2020-12-13T17:02:37.033 回答