Vue中如何在v-list-item-group选中项变化时更新组件数据

1. 调整列表组件配置 #

首先修改v-list-item-group和v-list-item，确保单选模式并绑定正确的选中值：

<v-list-item-group v-model="wfs" mandatory>
  <v-list-item 
    v-for="(list, index) in workflowStepsList" 
    :key="list.eid"
    :value="list.eid"
  >
    <v-list-item-action-text class="pe-4"> {{ index+1 }}</v-list-item-action-text>
    <v-list-item-content>
      {{ list.title || list.stepTitle }}
    </v-list-item-content>
    <v-list-item-icon>
      <v-icon small color="red">mdi-delete</v-icon>
    </v-list-item-icon>
  </v-list-item>
  <v-list-item v-if="!workflowStepsList.length">
    مرحله ای وجود ندارد
  </v-list-item>
</v-list-item-group>

• 添加mandatory属性启用单选模式，确保只能选中一项，切换时自动取消之前选中项
• 给v-list-item绑定:value="list.eid"，让wfs直接存储选中项的eid，简化后续逻辑
• 用list.eid作为key比索引更稳定，避免列表更新时的渲染问题
• 用list.title || list.stepTitle简化内容展示逻辑，替代两个v-if

2. 监听选中状态变化 #

在组件的watch中监听wfs的变化，处理清空数据和请求新数据的逻辑：

watch: {
  async wfs(newSelectedEid) {
    // 先清空当前展示的数据
    this.currStep = [];
    // 如果有选中项，才发起数据请求
    if (newSelectedEid) {
      await this.getWorkflowStep(newSelectedEid);
    }
  }
}

• 无论选中新项、取消选中（newSelectedEid为空），都会触发这个监听
• 先清空currStep，确保切换或取消时数据不会残留

3. 修改数据请求函数 #

调整getWorkflowStep，直接赋值currStep而非push，避免数据累加：

async getWorkflowStep(weid) {
  const response = await this.$store.dispatch("axiosGet", {
    url: `folder/api/workflow-steps/${weid}`, 
    params: {workflowId: this.id}
  });
  if (response.status === 'error') return;
  
  this.workflowStepsObj = response.data.data;
  const x = response.data.data;
  const curr = {
    title: x.stepTitle,
    eid: x.stepEid
  };
  // 直接赋值替换数组，而非追加
  this.currStep = [curr];
}

• 用await直接接收返回值，避免嵌套then，代码更简洁
• 直接将新数据赋值给currStep，确保每次都是最新的单个数据

4. 移除冗余点击事件 #

原来的@click="getWorkflowStep(list.eid)"可以直接删除，因为现在通过监听wfs的变化来触发数据请求，更符合v-list-item-group的状态管理逻辑。

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