从另一个组件填充 vue 多选下拉列表

Question

我目前正在做一个项目，需要一些帮助。

我有一个带有端点的后端，它提供一个包含大约 13k 条目的字符串数组。我在 DropdownSearch.vue 中创建了一个组件，它应该用于具有不同输入的多个不同视图。为此，我使用了 vueform/multiselect。如果我只尝试在没有任何信息的情况下添加下拉列表，它会完美地工作。此外，如果我访问端点和 console.log() 它将正常工作并向我提供输出。但是，如果我尝试将输出初始化为下拉菜单，整个页面将停止工作，端点不会给我响应并且应用程序会冻结。

DropdownSearch.vue

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

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

    <Multiselect
      class="float-left"
      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>

Answer 1

不是vue的问题你使用的库可能不支持virtual-list，当数据量变大时，实际的dom元素也会变大

您可能需要寻找另一个支持虚拟列表的库，仅在可视范围内渲染 dom 或通过 virtual-library

实现自定义组件

Answer 2

我找到了给定问题的解决方案，因为@math-chen 已经指出问题是在实际 Dom 变得非常大时将解决的数据量。您可以限制显示的条目数量，而不是使用虚拟列表，这可以通过添加

轻松完成

limit:"10"

对于多选组件，过滤所有项目可以由 javascript 本身轻松处理。

从另一个组件填充 vue 多选下拉列表

Fill vue multiselect dropdown from another component

vue.js

vuejs3