Vue.js+Vuetify实现动态v-dialog时多卡片弹窗数据错位问题

故障根因 #

所有循环渲染的v-dialog全部绑定了同一个全局布尔状态dialog，没有独立的开关控制。一旦该状态切换为true，页面上所有同作用域的弹窗都会被同时激活，最终出现弹窗错位、展示非当前卡片对应数据的问题；同时原模板存在嵌套冗余的v-card结构，进一步加剧了渲染错位。

推荐实现方案 #

不需要在v-for循环中渲染N个重复的弹窗实例，仅需在循环外部放置一个全局弹窗，点击卡片按钮时暂存当前选中的订单数据，再控制弹窗开关即可，该方案性能更高，也从根源上避免了状态串用的问题：

<template>
  <v-layout justify-center align-center wrap>
    <v-flex xs12 sm6>
      <!-- 移除原模板中冗余的嵌套v-card结构 -->
      <v-card 
        v-for="(item, index) in ordenes" 
        :key="index"
        class="mb-3"
      >
        <v-card-text>
          {{ item.date }}
        </v-card-text>
        <v-card-actions>
          <v-btn 
            class="caption" 
            small
            @click="handleOpenDialog(item)"
          >
            Form info
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-flex>

    <!-- 全局唯一弹窗，不放在循环内部 -->
    <v-dialog v-model="dialog" persistent max-width="290">
      <v-card>
        <v-card-text>
          <tr>{{ selectedOrder ? montoTot(selectedOrder) : '' }}</tr>
        </v-card-text>
        <v-card-actions>
          <v-btn @click="dialog = false">关闭</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </v-layout>
</template>

<script>
export default {
  data () {
    return {
      dialog: false,
      // 新增状态：缓存当前点击卡片对应的订单对象
      selectedOrder: null,
      ordenes: [
        { date: 1, price: 1},
        { date: 2, price: 2},
      ],
    }
  },
  methods: {
    // 新增方法：打开弹窗前先缓存当前订单数据
    handleOpenDialog(item) {
      this.selectedOrder = item
      this.dialog = true
    },
    montoTot (item) {
      return 10 + item.price
    },    
  }
}
</script>

保留卡片内嵌套弹窗的改造说明 #

如果坚持要在每个卡片内部嵌套独立弹窗，不能复用同一个全局dialog布尔值，需要为每个弹窗配置独立的状态控制：

• 可以给每个订单对象新增专属的弹窗开关属性（如showDialog: false），每个弹窗绑定对应item的独立属性
• 禁止所有弹窗绑定同一个通用布尔值，避免状态串用

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