Vue.js使用Vue-multiselect将两个下拉框选中值合并展示到同一标签

修改方案 #

你当前的代码存在三个核心问题：

1. selectedLanguage因开启了multiple为数组类型，selectedLanguageLevel为对象类型，直接拼接会输出[object Object]，需要取对应显示字段取值
2. 缺少存储已添加的「语言+水平」组合的数组，无法支持多次添加多条标签
3. 点击添加的getLang方法逻辑不完整，没有做数据处理、存储和选中项清空的操作

以下是可直接运行的修改后代码：

脚本部分

import VueMultiselect from 'vue-multiselect'
export default {
  components: { VueMultiselect },
  data () {
    return {
      languages:[],
      selectedLanguage: null, // 若不需要多选语言可保持该配置，用单个对象存储选中项
      languageLevels:[],
      selectedLanguageLevel: null, // 水平为单选，用单个对象存储
      addedLangTags: [] // 存储所有已添加的组合标签
    }
  },
  methods:{
    addLanguage (newLanguage) {
      const tagLanguage = {
        language: newLanguage,
      }
      this.languages.push(tagLanguage)
      this.selectedLanguage = tagLanguage
    },
    getLang() {
      // 校验是否同时选中了语言和水平
      if (!this.selectedLanguage || !this.selectedLanguageLevel) {
        alert('请先选择语言和对应水平')
        return
      }
      // 构造合并标签
      const newTag = {
        id: Date.now(), // 生成唯一标识，可根据需求调整
        label: `${this.selectedLanguage.language} - ${this.selectedLanguageLevel.language_level}`
      }
      // 存入标签数组
      this.addedLangTags.push(newTag)
      // 清空选中项，方便下次选择
      this.selectedLanguage = null
      this.selectedLanguageLevel = null
    },
    getLanguage: function () {
      this.axios
        .get(this.baseURL + "language", {
          headers: {
            Authorization: "Bearer " + this.token,
          },
        })
        .then((response) => {
          this.languages = response.data.data;
        })
        .catch((err) => {});
    },
    getLanguageLevel: function () {
      this.axios
        .get(this.baseURL + "language-level", {
          headers: {
            Authorization: "Bearer " + this.token,
          },
        })
        .then((response) => {
          this.languageLevels = response.data.data;
        })
        .catch((err) => {});
    },
  },
  beforeMount() {  
    this.token = "token updated";
    this.getLanguage();
    this.getLanguageLevel();
  },
}

模板部分

<template>
  <div class = "pl-20">
    <div class="flex">
      <label class = 'inline-block w-32 text-base text-gray2 font-normal mr-11 self-center' for="language">Language</label>
      <!-- 若确实需要多选语言，可恢复:multiple="true"配置，对应把selectedLanguage改回数组类型即可 -->
      <VueMultiselect class="w-44 mr-7 my-2.5" v-model="selectedLanguage" tag-placeholder="Add this as new language" placeholder="Search language" label="language" track-by="id" :options="languages" :taggable="true" @tag="addLanguage">
      </VueMultiselect>

      <VueMultiselect class="w-44 my-2.5" v-model="selectedLanguageLevel" :options="languageLevels" placeholder="Select Level" track-by="id" label="language_level">
      </VueMultiselect>
    </div>

    <div class="ml-48 ">
      <span class="text-sm mr-2.5">And</span>
        <button class="bg-btnBgGray mr-2.5 px-1 py-0.5 rounded text-xs">Below</button>
        <button class="bg-btnBgGray mr-2.5 px-1 py-0.5 rounded text-xs">Above</button>
      </div>
      <div class="ml-44 mt-2">
        <button class="bg-gray3 text-white px-7 py-1 rounded-3xl" @click="getLang">Add</button>
        </div>
      <!-- 已添加的标签展示区域，可自行调整样式匹配设计 -->
      <div class="border border-black my-2.5 ml-44 pl-5 pt-1.5 w-96 min-h-9 rounded-md self-center flex flex-wrap gap-2" v-if="addedLangTags.length">
        <span v-for="tag in addedLangTags" :key="tag.id" class="bg-gray-100 px-2 py-1 rounded text-sm">
          {{ tag.label }}
        </span>
      </div>
    </div>
</template>

如果需要保留语言多选的能力，只需将selectedLanguage改回数组类型，恢复VueMultiselect的:multiple="true"配置，构造标签时取this.selectedLanguage.map(item => item.language).join(',')即可同时展示多个选中的语言。

内容的提问来源于stack exchange，提问作者Geeta Ninawe