1

我在表单中有一个 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() 函数中定义的静态数组，它可以正常工作。任何人都可以确认我正确地实施了这一点吗？

4

1 回答 1

0

:options="roleOptions" 需要一个数组。确保 vue 变量是一个数组，而不是上面提到的对象或未定义等。

 data(){
        return{
            roleOptions:[],
          }
       }
于 2020-12-02T15:17:52.243 回答