踩坑指南——elementUI中el-switch开关点击弹出确认框时，状态先改变，点击确认/取消失效，怎么解决??_elementplus中switch控制弹框

需求：点击开关时，原来的状态不改变，弹出确认框，选择确认：状态改变；取消：保持原状
踩坑案例：


原因：v-model的数据双向绑定原理，点击开关时状态就以实时改变

怎么解决？如下（针对此案例）

只需将v-model改成:value="",再手动赋值即可（代码修改部分）

<template slot-scope="scope">
			//修改前:v-model="scope.row.templateState"
            <el-switch
              :value="scope.row.templateState"
              active-text="有效"
              inactive-text="失效"
              @change="updateState(scope.row)"
            />
          </template>
1
2
3
4
5
6
7
8
9

  // 状态处理
    updateState(row) {
      this.$confirm(
        `确定执行${!row.templateState ? "有效" : "失效"}操作, 是否继续？`, "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(async () => {
          const query = {
            templateId: row.templateId,
            templateState: !row.templateState,//修改后
            //修改前:templateState: row.templateState,
          };
          updateState(query).then((res) => {
            const message = res.message;
            if (message === "操作成功") {
              this.apiList();
            }
          });
        })
        .catch(() => {
          this.$message.error("取消操作");
        });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27