Vuetify 2 v-navigation-drawer关闭Dialog后再次打开不显示求助

问题分析 #

在Dialog内使用v-navigation-drawer展示数据列表，首次打开Dialog时组件正常显示，但再次打开时v-navigation-drawer完全消失，且数据GET请求无异常——说明数据已正确获取，但组件渲染或状态控制存在问题。

可行解决方案 #

1. 给v-navigation-drawer绑定显示状态 #

v-navigation-drawer默认依赖自身的显示状态，但Dialog复用过程中可能导致状态丢失，通过绑定v-model强制控制显示状态：

• 在组件data中添加状态变量：

data() {
  return {
    // 其他原有变量
    drawerVisible: true
  }
}

• 修改v-navigation-drawer代码，绑定v-model：

<v-navigation-drawer 
  floating 
  height="140px" 
  class="w-100"
  v-model="drawerVisible"
>
  <!-- 内部列表代码保持不变 -->
</v-navigation-drawer>

• 在Dialog的打开事件中重置drawer状态，确保每次打开Dialog时drawer处于显示状态：

<v-dialog @click:open="resetDrawer">
  <!-- 内部内容 -->
</v-dialog>

methods: {
  resetDrawer() {
    this.drawerVisible = true;
    this.getData();
  },
  // 其他原有方法
}

2. 替换v-for的key为唯一标识 #

当前使用index作为v-for的key，当数据有删除操作后，再次打开Dialog时可能导致Vue虚拟DOM复用异常，引发组件渲染问题。改用数据中的唯一ID（比如desc.eid）作为key：

<v-list-item 
  v-for="(desc, index) in dataList" 
  :key="desc.eid"  <!-- 替换index为eid -->
  @click="getDesc(desc)"
>
  <!-- 内部内容保持不变 -->
</v-list-item>

3. 同步数据获取时机与Dialog生命周期 #

如果getData是在Dialog的mounted钩子中调用，仅会执行一次。改为在Dialog的打开事件中调用，确保每次打开Dialog都重新获取数据并触发组件渲染：

<v-dialog @click:open="getData">
  <!-- 内部内容 -->
</v-dialog>

同时优化getData函数的异步写法（避免await和then混用）：

async getData() {
  const response = await this.$store.dispatch("axiosGet", {
    url: 'folder/api/descriptions', 
    params: {Title: this.title}
  });
  if (response.status === 'error') return;
  this.dataList = response.data.data.data;
}

总结 #

优先尝试绑定v-model控制drawer显示状态，同时替换v-for的key为唯一标识，这两个操作能解决绝大多数Dialog内组件二次渲染异常的问题。

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