Что не так с моими опциями vue-multiselect? - PullRequest
Новая
       43

Что не так с моими опциями vue-multiselect?

0 голосов
/ 01 ноября 2019

У меня есть компонент 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 инспектор я вижу, что параметры выглядят правильно (для меня). Я пытался передать их как реквизиты, вычисленные значения, сопоставленное состояние - одна и та же проблема каждый раз.

enter image description here

Если я поменяю местами опции длястатический массив, определенный в функции data (), работает нормально. Кто-нибудь может подтвердить, что я правильно это делаю?

1 Ответ

0 голосов
/ 01 ноября 2019

Я думаю process_roles генерировать динамически (после загрузки страницы). вам нужно установить пустой массив по умолчанию для roleOptions или использовать v-if="roleOptions!=undefined" для компонента множественного выбора.

Использовать try catch в computed (try { ...yourcode } catch(e) { return [] })

ИЛИ

<multiselect v-if="roleOptions!=undefined"

...