0

我正在使用 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  }}</code></pre>
    </div>

</template>


<script>
import axios from 'axios';
import Multiselect from 'vue-multiselect'

export default {
  components: {
    Multiselect
  },
  props: {
      userId: {
        type: Number,
        required: true
      },
    tagGroup: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      selectedTags: [],
      tags: [],
      isLoading: false
    }
  },
  methods: {
    addTag (newTag) {
        const tag = {
          name: newTag
        }
        this.tags.push(tag)
        this.selectedTags.push(tag)
      },
      limitText (count) {
        return `and ${count} other tags`
      },
      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 = []
      }
  }
}

</script>

我在另一个组件中使用了该组件两次：

<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>
4

0 回答 0