Vue.js循环中为每个ref绑定模态框关闭事件遇访问异常

核心问题 #

1. 模板中ref写法错误：Vue的ref属性不支持插值语法{{}}，必须使用动态绑定:ref生成带索引的ref名称。
2. DOM渲染时机问题：如果模态框基于异步数据渲染，mounted钩子执行时DOM可能未完全生成，导致无法获取目标refs。

解决方案一：修正ref写法与mounted事件绑定 #

第一步：修正模板的ref绑定

假设你的循环结构是v-for="(item, index) in items"，将ref改为动态绑定：

<div v-for="(item, index) in items" :key="index" :ref="`vuemodal-${index}`">
  <!-- Bootstrap模态框的完整结构 -->
</div>

第二步：确保DOM渲染完成后绑定事件

使用$nextTick确保循环生成的DOM完全渲染，再遍历refs绑定事件：

mounted() {
  this.$nextTick(() => {
    Object.keys(this.$refs).forEach(refName => {
      const modalElement = this.$refs[refName];
      $(modalElement).on("hidden.bs.modal", this.doSomethingOnHidden);
    });
  });
},
beforeUnmount() {
  // 组件销毁前解绑事件，避免内存泄漏
  Object.keys(this.$refs).forEach(refName => {
    const modalElement = this.$refs[refName];
    $(modalElement).off("hidden.bs.modal", this.doSomethingOnHidden);
  });
},
methods: {
  doSomethingOnHidden() {
    // 模态框关闭后的逻辑处理
    console.log("模态框已关闭");
  }
}

解决方案二：使用自定义指令（更符合Vue最佳实践） #

自定义指令可自动处理事件的绑定与解绑，无需手动操作refs，更贴合Vue的响应式设计：

第一步：注册全局/局部自定义指令

// 全局注册（在main.js中）
Vue.directive('modal-hidden', {
  inserted(el, binding) {
    // 元素插入DOM时绑定事件
    $(el).on('hidden.bs.modal', binding.value);
  },
  unbind(el, binding) {
    // 元素销毁时解绑事件
    $(el).off('hidden.bs.modal', binding.value);
  }
});

// 或局部注册（在组件的directives选项中）
directives: {
  'modal-hidden': {
    inserted(el, binding) {
      $(el).on('hidden.bs.modal', binding.value);
    },
    unbind(el, binding) {
      $(el).off('hidden.bs.modal', binding.value);
    }
  }
}

第二步：在模板中使用指令

<div v-for="(item, index) in items" :key="index" v-modal-hidden="doSomethingOnHidden">
  <!-- Bootstrap模态框的完整结构 -->
</div>

（可选）传递当前循环项参数

如果需要在关闭事件中操作当前循环的item或索引，可直接在指令中传递：

<div v-for="(item, index) in items" :key="index" v-modal-hidden="() => doSomethingOnHidden(item, index)">

对应的方法：

methods: {
  doSomethingOnHidden(item, index) {
    console.log(`索引${index}的模态框已关闭，对应数据：`, item);
    // 自定义逻辑处理
  }
}

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