Vue/Vuetify实现每行数据独立开关v-btn状态问题求助

核心问题原因 #

你当前用全局的tracked和trackedBtnText变量控制所有按钮，点击任意按钮都会修改同一个全局变量，导致所有按钮同步变化。要解决这个问题，必须为每个账单条目维护独立的状态。

解决方案步骤 #

1. 调整状态存储结构 #

放弃单个变量存状态，改用对象trackedBills，以账单id为键，存储对应条目的状态及后续扩展数据。这样每个账单的状态相互独立，互不干扰。

2. 修改数据初始化逻辑 #

获取账单数据后，为每个账单初始化跟踪状态（默认未跟踪）。如果API返回二维数组，建议先转成对象数组，更方便后续操作。

3. 调整按钮绑定逻辑 #

循环渲染按钮时，根据当前账单的独立状态显示文本，点击事件传递对应账单的id，实现精准的状态修改。

完整代码示例 #

模板部分（含账单循环渲染） #

<template>
  <div v-for="bill in bills" :key="bill.id" class="bill-item">
    <!-- 展示账单数据 -->
    <span>{{ bill.datafield1 }} | {{ bill.datafield2 }}</span>
    <!-- 独立状态的v-btn按钮 -->
    <v-btn
      color="primary"
      variant="outlined"
      @click="trackBill(bill.id)"
    >
      {{ trackedBills[bill.id]?.tracked ? 'Tracked' : 'Track' }}
    </v-btn>
  </div>
</template>

脚本部分 #

<script>
export default {
  data: () => ({
    bills: [],
    trackedBills: {}, // 结构：{ [billId]: { tracked: boolean, ...扩展数据 } }
    keywords: ''
  }),
  methods: {
    async showBills() {
      // 假设showBills返回格式：[[id, datafield1, datafield2], ...]
      const rawData = await showBills(this.keywords);
      // 转换为对象数组，提升可读性
      this.bills = rawData.map(item => ({
        id: item[0],
        datafield1: item[1],
        datafield2: item[2]
      }));
      // 初始化每个账单的跟踪状态及扩展字段
      this.bills.forEach(bill => {
        this.trackedBills[bill.id] = {
          tracked: false,
          // 后续可添加跟踪时间、备注等扩展数据
        };
      });
    },
    trackBill(billId) {
      // 切换对应账单的跟踪状态
      this.trackedBills[billId].tracked = !this.trackedBills[billId].tracked;
      
      // 后续可在此发起API请求，比如同步状态到后端
      // await syncTrackStatus(billId, this.trackedBills[billId].tracked);
    },
  },
};
</script>

扩展说明 #

• 如果需要给跟踪条目添加更多数据（如跟踪时间、备注），直接在trackedBills的对应id对象中新增属性即可，不会影响其他条目。
• 若API返回的已是对象数组，可跳过数组转对象的步骤，直接初始化trackedBills。

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