[Vuejs]-Dropdown auto close when selected first, but the second select works properly vue-multiselect

by

0👍

Not sure because your configuration seems correct. However, a new step is mentioned in the documentation, to add CSS via CDN. Maybe you forgot to add the proper CDNs.
One more reason could be, I can’t see any event named async-find in the doc. There is a method named asyncFind which can be used when calling upon a search query.

Try matching your asynFind method and rest config with this example-

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

Here is the working demo.

Leave a comment