时间戳

首页 > 解决方案 > 在 vuejs 中显示 swal 消息之前状态已更改

javascript - 在 vuejs 中显示 swal 消息之前状态已更改

问题描述

<b-card-text class="mb-0">
    Success
</b-card-text>
<b-form-checkbox
   checked="true"
   class="custom-control-success"
   name="check-button"
   switch
   @change="changeStatus"
/>

    changeStatus() {
      this.$swal({
        icon: "question",
        text: "Change Status?",
        buttonsStyling: false,
        showCancelButton: true,
        confirmButtonText: "OK",
      }).then((result) => {
        if (result.isConfirmed) {
          // handle code
        }
      });
    },

我在 vuejs 中制作复选框。当我点击状态切换状态时，它显示一个swal说法Change Status。我遇到的问题是：当我按状态时，swal出现一条消息，状态已更改。我想如果我按下Ok状态会改变，但如果我按下取消它会保持不变，谢谢

标签： javascriptvue.js

解决方案

你的开关不是反应值
检查默认是true正确的，当它改变时false

你只需要让它反应

例子：
data():{ arr:[{name: "test", status: true}, {name: "test2", status: false}]}

使其具有反应性

<table id="example-1">
  <tr v-for="item in arr" :key="item.name">
    <td>{{ item.name }}</td>
    <td>
    <b-form-checkbox
       checked="item.status" <--- this make it reactive
       class="custom-control-success"
       name="check-button"
       switch
       @change="changeStatus"
    />
  </td>
  </tr>
</table>

推荐阅读