API调用失败时还原Vuetify切换按钮状态的问题

问题原因 #

Vuetify 2的v-btn-toggle组件内部维护了internalLazyValue私有状态，用于控制按钮的选中视觉反馈。用户点击按钮时该值会立即同步更新，但当父组件通过props回退选中值时，组件内部的响应逻辑未触发internalLazyValue与外部props的同步——它的设计更偏向响应用户交互，而非被动接收props变更更新内部状态。再加上Vue的异步更新队列机制，props变更后的状态更新未能及时触达组件私有状态，导致视觉选中状态与实际props值不一致。

解决方案 #

方案1：通过key强制子组件重新渲染 #

给子组件绑定动态key，当需要还原状态时，key值随obj.prop变化触发组件重新挂载，v-btn-toggle会基于新的myProp初始化内部状态，确保视觉与数据一致。

父组件代码修改：

<test-toggle 
  :my-prop="obj.prop" 
  @change="onChange"
  :key="`toggle-${obj.prop}`"
></test-toggle>

方案2：子组件内监听props变更，手动同步内部状态 #

在子组件中监听myProp的变化，直接修改v-btn-toggle实例的internalLazyValue，强制同步视觉状态。

子组件代码修改：

<template>
  <v-btn-toggle v-model="localProp" ref="btnToggle">
    <v-btn value="1">Value1</v-btn>
    <v-btn value="2">Value2</v-btn>
    <v-btn value="3">Value3</v-btn>
  </v-btn-toggle>
</template>

<script>
export default {
  name: 'TestToggle',
  props: {
    myProp: { type: String, default: null },
  },
  computed: {
    localProp: {
      get() {
        return this.myProp;
      },
      set(value) {
        this.$emit('change', value);
      },
    },
  },
  watch: {
    myProp(newVal) {
      if (this.$refs.btnToggle) {
        this.$refs.btnToggle.internalLazyValue = newVal;
      }
    }
  }
};
</script>

注：该方案依赖Vuetify 2的内部实现，版本变更可能影响可用性。

方案3：调整父组件逻辑，先请求再更新状态 #

避免本地状态先更新再回退的场景，改为API请求成功后才更新本地状态，同时添加loading状态优化用户体验。

父组件代码修改：

async onChange(prop) {
  const objUpdated = { ...this.obj, prop };
  this.isLoading = true;
  try {
    await myApiCall(objUpdated);
    this.obj.prop = prop;
  } catch {
    // 失败无需回退，本地状态未修改
  } finally {
    this.isLoading = false;
  }
}

子组件添加loading禁用：

<v-btn-toggle v-model="localProp" :loading="isLoading" :disabled="isLoading">
  <v-btn value="1">Value1</v-btn>
  <v-btn value="2">Value2</v-btn>
  <v-btn value="3">Value3</v-btn>
</v-btn-toggle>

内容的提问来源于stack exchange，提问作者Clément Picou