Vue2搭配Vuetify使用v-for嵌套v-dialog出现死循环调用栈溢出问题

问题根因 #

• 核心错误是你将v-dialog组件写在了v-for循环体内，所有循环生成的弹窗都绑定了同一个响应式变量dialogDelete。当你点击删除按钮修改dialogDelete的值时，所有弹窗的v-model都会同步触发状态更新，叠加Vuetify dialog组件的内部状态更新逻辑，会导致Vue响应式更新陷入死循环，最终触发栈溢出报错。
• 次要潜在问题：你使用数组下标作为v-for的key值，删除元素时会出现DOM复用异常，可能引发渲染错乱。

修复方案 #

全局只保留一个删除确认弹窗即可，不需要为每个商品单独生成弹窗，新增变量存储当前待删除的商品下标即可实现需求。

修改后代码 #

模板部分

<div class="mt-16">
  <v-list flat>
    <div
      v-for="(card, index) in $store.state.cards"
      :key="card.id || index" <!-- 优先用商品唯一id作为key，没有再用下标兜底 -->
    >
      <v-list-item>
        <template>
          <v-list-item-action>
            <v-btn icon>
              <v-icon>mdi-pencil</v-icon>
            </v-btn>
          </v-list-item-action>

          <v-list-item-content>
            <v-list-item-title>{{ card.name }}</v-list-item-title>
          </v-list-item-content>
          <v-list-item-action>
            <v-btn 
              icon
              @click="openDeleteDialog(index)"
            >
              <v-icon color="red darken-1">mdi-delete</v-icon>
            </v-btn>
          </v-list-item-action>
        </template>
      </v-list-item>
      <v-divider></v-divider>
    </div>
  </v-list>
  <!-- 弹窗移到循环外部，全局仅保留一个 -->
  <v-dialog
    v-model="dialogDelete"
    max-width="300"
  >
    <v-card>
      <v-card-title class="text-h5">
        确认删除？
      </v-card-title>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn
          color="error"
          text
          @click="dialogDelete = false"
        >
          取消
        </v-btn>
        <v-btn
          color="error"
          text
          @click="confirmDelete"
        >
          确认删除
        </v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</div>

JS逻辑部分

export default {
  data() {
    return {
      dialogDelete: false,
      currentDeleteIndex: null // 存储当前待删除的商品下标
    }
  },
  methods: {
    openDeleteDialog(index) {
      this.currentDeleteIndex = index
      this.dialogDelete = true
    },
    confirmDelete() {
      this.deleteArticle(this.currentDeleteIndex)
      this.dialogDelete = false
      this.currentDeleteIndex = null
    },
    deleteArticle(index) {
      // 保留你原有删除逻辑，比如调用store mutation修改cards数组
      this.$store.commit('removeCard', index)
    }
  }
}

内容的提问来源于stack exchange，提问作者timo.js