第一個選擇時下拉自動關閉，但第二個 select 正常工作 vue-multiselect

Question

我有問題，當第一個 select 下拉窗口將關閉時，即使我設置close-on-select="false" ，下拉列表仍然隱藏在第一個 select 之后，但自下一個 select 以來它正常工作
可以直接在首頁鏈接看到： vue-multiselect
或者你可以在這里觀看視頻

這是我的代碼：

              <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"
              />

Answer 1

不確定，因為您的配置似乎正確。 但是，文檔中提到了一個新步驟，即通過 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>

這是工作演示。