Vuetify数据表格中v-switch结合SweetAlert取消操作时恢复初始状态的实现问题

The core issue here is that Vuetify's v-switch updates its v-model immediately when clicked, so when the user cancels the SweetAlert dialog, you need to manually revert the item.is_active value back to its original state. Here's how to fix this step-by-step:

Step 1: Track the Original State Before Dialog #

In your toggle_status method, first capture the original state of the switch (since the v-model has already updated by the time the click event fires, we can derive the original value from the current switched value). Then, if the user cancels the dialog, reset the item.is_active to this original state.

Step 2: Simplify Your Template (Optional but Clean) #

Your two separate v-tooltip components can be merged into one by using a conditional for the tooltip text—this reduces code duplication and makes the template cleaner.

Modified Code #

Template Section

<v-data-table 
  :headers="headers" 
  :items="users" 
  item-key="pk" 
  :loading="loading" 
  hide-default-footer 
  :items-per-page="i_per_page"
>
  <template v-slot:item.switch="{ item }">
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <div v-bind="attrs" v-on="on">
          <v-switch 
            :id="String(item.user_id)" 
            :loading='switchLoader' 
            true-value="active" 
            false-value="null" 
            v-model="item.is_active" 
            @click="toggle_status(item.user_id, item.is_active, $event)"
          ></v-switch>
        </div>
      </template>
      <small>{{ item.is_active === 'active' ? 'Suspend' : 'Activate' }}</small>
    </v-tooltip>
  </template>
</v-data-table>

Script Section (Methods)

methods: {
  toggle_status(user_id, currentValue, e) {
    // Capture the original state before the switch was toggled
    const originalValue = currentValue === 'active' ? 'null' : 'active';
    
    // Set up dialog text based on the intended action
    let dialogConfig;
    if (currentValue === 'null') {
      this.action = '0';
      dialogConfig = {
        title: 'Are you sure you want to deactivate user?',
        confirmButtonText: 'Deactivate'
      };
    } else {
      this.action = '1';
      dialogConfig = {
        title: 'Are you sure you want to activate user?',
        confirmButtonText: 'Activate'
      };
    }

    swal.fire({
      ...dialogConfig,
      showDenyButton: true,
      denyButtonText: 'Cancel'
    }).then(result => {
      if (result.isConfirmed) {
        // Proceed with your API call or state update
        this.toggle_user(user_id, currentValue);
      } else {
        // Revert the switch back to its original state
        const targetUser = this.users.find(user => user.user_id === user_id);
        if (targetUser) {
          targetUser.is_active = originalValue;
        }
      }
    });
  },
  // Your existing toggle_user method here
  toggle_user(user_id, value) {
    // ... your API logic
  }
}

Key Explanations #

1. Original State Capture: We calculate originalValue by reversing the currentValue (since the switch has already toggled when the click event runs).
2. Dialog Configuration: We use an object to store dialog text, making the code cleaner and easier to maintain.
3. Reverting State: When the user clicks "Cancel", we find the corresponding user in the users array and reset their is_active property to the original value—this automatically updates the v-switch via two-way binding.
4. Template Simplification: Merged the two v-tooltip components into one with conditional text rendering, cutting down on redundant code.

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