vue-multiselect с тегами и асинхронностью, перестает работать - PullRequest
Новая
       19

vue-multiselect с тегами и асинхронностью, перестает работать

0 голосов
/ 29 сентября 2018

Я использую vue-multiselect и хотел бы, чтобы пользователь мог искать теги в базе данных с помощью асинхронного поиска, и если они не находят то, что хотят, введите свой собственный тег.Это означает, что я использую тегирование и асинхронность.Он работает, как и ожидалось, пока я не добавлю тег, не найденный в, тогда aysnc больше не ищет.Если я удалю добавленный тег, он снова выполнит асинхронный поиск .. 

<template>

    <div>
      <label class="typo__label" for="ajax">Async multiselect</label>
      <multiselect v-model="selectedTags" id="tags" label="name" track-by="code" placeholder="Type to search" open-direction="bottom" :options="tags" :taggable="true" @tag="addTag" :multiple="true" :searchable="true" :loading="isLoading" :internal-search="false" :clear-on-select="true" :close-on-select="false" :options-limit="300" :limit="3" :limit-text="limitText" :max-height="600" :show-no-results="false" :hide-selected="true" @search-change="asyncFind">
        <template slot="clear" slot-scope="props">
          <div class="multiselect__clear" v-if="selectedTags.length" @mousedown.prevent.stop="clearAll(props.search)"></div>
        </template><span slot="noResult">Oops! No elements found. Consider changing the search query.</span>
      </multiselect>
      <pre class="language-json"><code>{{ selectedTags  }}
import axios from 'axios';import Multiselect из 'vue-multiselect' export default {компоненты: {Multiselect}, реквизиты: {userId: {тип: Number, обязательный: true}, tagGroup: {type: String, обязательный: true}}, data () {return{selectedTags: [], теги: [], isLoading: false}}, методы: {addTag (newTag) {const tag = {name: newTag} this.tags.push (tag) this.selectedTags.push (tag)}, limitText (count) {return `и $ {count} других тегов`}, asyncFind (query) {if (query.length> 3) {this.isLoading = true axios.get ('/ api / tags /' + this.tagGroup + '/' + query) .then (response => {this.tags = response.data.results.map (a => {return {name: a.name.en};});})}},clearAll () {this.selectedTags = []}}}

Я использую компонент дважды внутри другого компонента: 

<user-tags v-bind:tagGroup="'industry'" :typeahead-activation-threshold="2" :userId="user.id" :isSearchable="true"></user-tags>


<user-tags v-bind:tagGroup="'expertise'" :typeahead-activation-threshold="2" :userId="user.id" :isSearchable="true"></user-tags>
...