我的vue-multiselect选项有什么问题？

Question

我在表单中有一个vue-multiselect组件，并且控制台报告我的选项未定义，即使我看不到它们也没有。我的选项是从后端获取的，并且在创建此组件之前就已放入商店中。

控制台错误是

Invalid prop: type check failed for prop "options". Expected Array, got Undefined

这是我的组成部分

<template>
  <form action="#" @submit.prevent>
    <section>
      <div class="container">
        <h2 class="subtitle">Details</h2>

        <b-field label="Role" horizontal>
          <multiselect
            :options="roleOptions"
            track-by="id"
            label="title"
            :multiple="true"
            :close-on-select="false"
            :clear-on-select="false"
          ></multiselect>
        </b-field>
      </div>
    </section>
  </form>
</template>

<script>
import Multiselect from "vue-multiselect";
import { mapState, mapActions } from "vuex";
export default {
  name: "ProcessDetailsComponent",
  components: {
    multiselect: Multiselect
  },
  computed: {
    roleOptions() {
      return this.$store.state.processes.formData.process_roles;
    }
  },
};
</script>

<style scoped>
</style>

在开发人员工具Vue检查器中，我可以看到这些选项看起来正确。我尝试将它们作为道具，计算值，映射状态传递给我-每次都遇到相同的问题。

如果我将选项换成data（）函数中定义的静态数组，则可以正常工作。谁能确认我在正确实施此操作？

Answer 1

：options =“ roleOptions”需要一个数组。确保vue变量是数组，而不是如上所述的对象或未定义等。

 data(){
        return{
            roleOptions:[],
          }
       }