0

multiselect в компоненте.

Мультиселект использую асинхронный выбор

При вводе текста в поисковое поле метод asyncFind вызывает метод getTags который в свою очередь отправляет через vuex -> axios запрос на сервер.

Мой компонент:

<template>
  <div class="field m-t-3">
    <label class="label">Select a tags.</label>
    <div>Tags v-model: {{ vacancy.tags }}</div>
    <multiselect
      v-model="vacancy.tags"
      placeholder="Select a tags"
      :options="tagOptions"
      :multiple="true"
      :searchable="true"
      :loading="isLoading"
      :internal-search="false"
      :close-on-select="false"
      :show-labels="false"
      :taggable="false"
      :limit="10"
      @search-change="asyncFind"
    ></multiselect>
    <div>Tags TagList: {{ tagOptions }}</div>
  </div>
</template>

<script>
import Multiselect from 'vue-multiselect'

export default {
  name: 'FormComponentTag',
  props: ['vacancy'],
  mixins: [validationMixin],
  components: {
    Multiselect
  },
  data() {
    return {
      tagOptions: [],
      isLoading: false,
    }
  },
  methods: {
    asyncFind (query) {
      this.isLoading = true
      this.getTags(query)
      this.isLoading = false
    },
    async getTags(query) { // Не знаю нужен ли тут async/await но что с ним, что без него работает одинаково.
      await this.$store.dispatch('getTags', query) // шлем запрос на сервер
      const test = this.$store.getters.tags.data
      console.log('getTags:', test)
      console.log('Type:', typeof test)
      this.tagOptions = test // получаю [Vue warn]: Invalid prop: type check failed for prop "options". Expected Array, got Undefined. Потому что не дожидаюсь ответа сервера
    }
  }
};
</script>

<style lang="scss" scoped>
</style>

Проблема в том, что у меня присваивание переменной tagOptions значений из хранилища происходят раньше чем в хранилище приходят данные от сервера в итоге tagOptions у меня undefined, а должен быть массив. Как это можно исправить?

1 ответ 1

0

Проблема скрывалась в хранилище vuex. Мой запрос action выглядел так:

getTags(context, query) {
  api.get(`getTags/${query}`)
    .then( res => context.commit('UPDATE_TAGS', res))
}

так стало работать как надо

async getTags(context, query) {
  const res = await api.get(`getTags/${query}`)
  context.commit('UPDATE_TAGS', res)
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.