VueJS结合BootstrapVue实现下拉生成元素时自动触发带参函数的问题

实现方案 #

方案1：DOM挂载时自动触发（推荐，完全匹配需求） #

利用Vue的钩子事件绑定，在目标div挂载到DOM时自动调用方法，直接修改模板中问号标记的代码即可：

<div @hook:mounted="getValues(id, indexParent, indexChild)">

• 不管是点击新增单个输入项，还是下拉选中批量生成输入项，每一项的DOM创建完成时都会自动触发一次getValues，参数为当前循环项对应的正确值。

方案2：批量生成时主动调用 #

如果不需要严格等待DOM渲染完成，只需要在输入项数据生成时触发方法，可直接修改trySomething逻辑，不用改动模板：

trySomething(itemValue) {
  const array = [];
  const products = this.otherJSON.find((i) => i.Number === itemValue);
  for (let key in products.ID) {
    array.push(products.ID[key]);
  }
  this.getLengthArray = array.length;
  this.inputs.splice(0)
  for (let i = 0; i < this.getLengthArray; i++) {
    const currentId = array[i]
    // 存入对应id，不要推空对象
    this.inputs.push({ id: currentId });
    // 主动触发方法
    this.getValues(currentId, this.indexParent, i)
  }
}

现有代码修正项 #

1. 方法名不匹配：模板中绑定的@click="addElement()"和methods中定义的addProduct名称不一致，改为统一命名：

methods: {
  addElement() {
    this.inputs.push({})
  },
  // 其余方法不变
}

2. 输入项id为空问题：原批量生成逻辑中往inputs数组推的是空对象，会导致getValues拿到的id参数无效，需要按实际业务把对应id存入输入项对象中。

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