第一次选择时下拉菜单自动关闭,但第二次选择工作正常vue-multiselect

z6psavjg  于 2023-01-14  发布在  Vue.js
关注(0)|答案(1)|浏览(185)

我有问题,当第一次选择下拉菜单将关闭,即使我已经设置close-on-select="false"下拉菜单仍然隐藏后,第一次选择,但因为这下一次选择它的工作正常
您可以直接在主页链接中看到它:多重选择
或者您可以在video观看视频
下面是我代码:

<Multiselect
                v-model="form.users_ids"
                id="students"
                label="name"
                class="chat-bulk-form-mul"
                :custom-label="nameWithRelation"
                :options="optionUsers"
                :multiple="true"
                :clear-on-select="false"
                :close-on-select="false"
                :preserve-search="true"
                :hide-selected="true"
                :max-height="200"
                :internal-search="false"
                @async-find="asyncFind"
                @infinite-scroll="infiniteScroll"
              />
vltsax25

vltsax251#

不确定,因为您的配置似乎正确。但是,文档中提到了一个新步骤,即通过CDN添加CSS。可能您忘记添加正确的CDN了。
另一个原因可能是,我在文档中看不到任何名为async-find的事件。有一个名为asyncFind的方法,可以在调用搜索查询时使用。
尝试将您的asynFind方法和rest配置与以下示例匹配-

<template>
  <div id="app">
    <label>Simple select / dropdown</label>
    <multiselect
      v-model="value"
      :options="options"
      :multiple="true"
      :clear-on-select="false"
      :close-on-select="false"
      :preserve-search="true"
      :hide-selected="true"
      :max-height="200"
      :internal-search="false"
      label="name"
      track-by="name"
      :custom-label="customLabel"
      @search-change="asyncFind"
    >
    </multiselect>
  </div>
</template>

<script>
import Multiselect from "vue-multiselect";

export default {
  name: "App",
  components: {
    Multiselect,
  },
  data() {
    return {
      value: [],
      options: [
        { name: "Vue.js", language: "JavaScript" },
        { name: "Adonis", language: "JavaScript" },
        { name: "Rails", language: "Ruby" },
        { name: "Sinatra", language: "Ruby" },
        { name: "Laravel", language: "PHP" },
        { name: "Phoenix", language: "Elixir" },
      ],
    };
  },
  methods: {
    customLabel({ name, language }) {
      return `${name} – ${language}`;
    },
    asyncFind(query) {
      console.log(query);
    },
  },
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

这是working demo

相关问题