循环创建多Vue实例：挂载后v-model与v-on:change绑定失效

核心问题拆解 #

• 重复挂载打乱初始化流程：实例化Vue时你已经传入了el参数，Vue会自动完成挂载，但又在created钩子中调用$mount重复执行挂载操作，这会导致Vue的指令绑定逻辑异常。
• 方法未正确注入实例：如果业务方法没有提前定义到methods对象中（你当前代码里methods是空对象），v-on:change自然无法触发对应逻辑；另外Vue初始化时会一次性绑定methods中的方法，后续动态添加的方法无法被自动识别。

修正后的代码示例 #

JavaScript部分 #

Init() {
  const elements = document.querySelectorAll('[id^="training-product-app"]');
  elements.forEach(element => {
    this.startApp(element.id);
  });
}

startApp(elementId) {
  // 提前定义好实例需要的data、methods、watch
  const data = {
    name: elementId // 你的动态属性
  };
  const methods = {
    // 替换为实际业务的change处理逻辑
    handleInputChange() {
      console.log('触发change事件：', this.name);
    }
  };
  const watch = {
    // 按需添加监听逻辑
  };

  // 移除重复的$mount调用，通过el参数让Vue自动完成挂载
  const instance = new Vue({
    i18n,
    el: `#${elementId}`,
    data,
    methods,
    watch
  });
  console.log('instance', instance);
}

对应HTML模板（确保指令绑定匹配） #

<div id="training-product-app-@productIndex">
  @Html.Partial("~/Views/Commerce/Product/TrainingVariantsForm.cshtml", new ProductPageFormViewModel
  {
    VariantDetails = item,
    VariantType = method.Value.ToAlphaOnly(),
  })
  <!-- 示例：绑定对应实例的属性和方法 -->
  <input v-model="name" @change="handleInputChange" />
</div>

额外注意点 #

• 所有需要绑定的方法必须在实例化Vue前就添加到methods对象中，Vue会在初始化阶段完成方法的上下文绑定。
• 确保Partial视图中的Vue指令，绑定的变量、方法都存在于当前实例的data和methods中，每个实例都是独立的，无法共享其他实例的属性或方法。

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