Vue中如何为multiselect组件传递列表名称以实现指定列表添加标签

DevOps 小满

2026-8-7

解决方案

问题出在两个核心点：事件参数传递方式错误，以及动态访问列表的语法使用不当。以下是具体修复步骤：

1. 修正模板中的事件绑定

multiselect的@tag事件默认会将新输入的标签文本作为第一个参数传递，直接写@tag="addTag('ListA')"会覆盖这个默认参数，导致方法无法获取到newTag。需要改用箭头函数同时传递两个参数：

<!-- List A 组件 -->
<multiselect
  v-model="SelAlergies1"
  :height="300"
  :options="ListA"
  :multiple="true"
  :taggable="true"
  placeholder="Alergies1"
  @tag="(newTag) => addTag(newTag, 'ListA')"
  label="tag"
  track-by="code"
></multiselect>

<!-- List B 组件 -->
<multiselect
  v-model="SelAlergies2"
  :height="300"
  :options="ListB"
  :multiple="true"
  :taggable="true"
  placeholder="Alergies2"
  @tag="(newTag) => addTag(newTag, 'ListB')"
  label="tag"
  track-by="code"
></multiselect>

<!-- List C 组件 -->
<multiselect
  v-model="SelAlergies3"
  :height="300"
  :options="ListC"
  :multiple="true"
  :taggable="true"
  placeholder="Alergies3"
  @tag="(newTag) => addTag(newTag, 'ListC')"
  label="tag"
  track-by="code"
></multiselect>

2. 修正`addTag`方法的列表访问逻辑

不能直接用this.listName访问目标列表——listName是字符串变量，必须使用方括号语法this[listName]来动态访问Vue实例上的列表属性。同时要保证新标签的字段和现有列表结构一致（示例中现有列表用tag和code字段，而非Etiqueta），并生成唯一的code值：

addTag(newTag, listName) {
  const targetList = this[listName];
  const newTagObj = {
    tag: newTag,
    code: targetList.length + 1 // 基于当前列表长度生成唯一code
  };
  targetList.push(newTagObj);
}