我的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:[],
          }
       }