I am currently working on a project and could use some help.

I have a backend with an endpoint which delivers an array of strings with approximately 13k entries. I created a component in DropdownSearch.vue which should be used on several different views with differing inputs. For this specific purpose I used vueform/multiselect. If I only try to add the dropdown without any information it works perfectly. Also if I access the endpoints and console.log() it it will work properly and deliver me an output. But if I try to initialize the output to the dropdown the whole page will stop working, the endpoint won't give me a response and the application freezes.

DropdownSearch.vue

  <div>
    <Multiselect
      
      v-model="valueDropdownOne"
      mode="tags"
      :placeholder="selectorOne"
      :closeOnSelect="false"
      :searchable="true"
      :createTag="true"
      :options="dropdownOne"
      :groups="true"
    />

    <Multiselect
      
      v-model="valueDropdownTwo"
      mode="tags"
      :placeholder="selectorTwo"
      :closeOnSelect="false"
      :searchable="true"
      :createTag="true"
      :options="dropdownTwo"
    />

    <Multiselect
      
      v-model="valueDropdownThree"
      mode="tags"
      :placeholder="selectorThree"
      :closeOnSelect="false"
      :searchable="true"
      :createTag="true"
      :options="dropdownThree"
    />
  </div>
</template>

<script>
import Multiselect from "@vueform/multiselect";
import { ref }from "vue"

export default {
  name: "DropdownSearch",
  components: { Multiselect },
  props: {
    selectorOne: {
      type: String,
      default: "<DEFAULT VALUE>",
      required: true,
    },
    selectorTwo: {
      type: String,
      default: "<DEFAULT VALUE>",
      required: true,
    },
    selectorThree: {
      type: String,
      default: "<DEFAULT VALUE>",
      required: true,
    },
    dropdownOne: {
        type: Array
    }
    ,
    dropdownTwo: {
        type: Array
    },
    dropdownThree: {
        type: Array
    }
  },
  setup() {
    const valueDropdownOne = ref()
    const valueDropdownTwo = ref()
    const valueDropdownThree = ref()

    return {valueDropdownOne, valueDropdownTwo, valueDropdownThree}
  }
};
</script>

<style src="@vueform/multiselect/themes/default.css"></style>

Datenbank.vue

<template>
  <div>
    <DropdownSearch
      selectorOne="Merkmale auswählen"
      :dropdownOne="dropdownOne"
      selectorTwo="Monographien auswählen"
      :dropdownTwo="dropdownTwo"
      selectorThree="Orte auswählen"
      :dropdownThree="dropdownThree"
    ></DropdownSearch>
  </div>
</template>

<script>
import DropdownSearch from "../components/DropdownSearch.vue";
import { ref, onMounted } from "vue";

export default {
  components: { DropdownSearch },
  setup() {
    const dropdownOne = ref([]);
    const dropdownTwo = ref([]);
    const dropdownThree = ref([]);

    const getPlaces = async () => {
      const response = await fetch("http://127.0.0.1:5000/project/get-places");
      const places = await response.json();

      return places;
    };

    onMounted(async () => {
      const places = await getPlaces();
      dropdownThree.value = places;
    });

    return {
      dropdownOne,
      dropdownTwo,
      dropdownThree
    };
  },
};
</script>

<style lang="scss" scoped></style>

CodePudding user response：

it is not the problem of vue the library you used may not support virtual-list, when the amount of data becomes large, the actual dom element will also become large

you may need to find another library support virtual-list, only render dom in visual range or implement a custom component by a virtual-library

CodePudding user response：

I found a solution to the given problem, as @math-chen already stated the problem is the amount of data which will resolve in the actual Dom becoming really large. Rather than using virtual-lists, you can limit the amount of entries displayed which can easily be done by adding

limit:"10"

to the multiselect component, filtering all items can easily be handled by javascript itself.