Javascript 如何在vue 3中设置ajax调用的ref值而不触发@update:modelValue？

我有一个复选框，单击该复选框会使用模板中的

@update:modelValue

语法触发ajax调用。但是，每当此页面加载时，就会调用ajax调用

这是因为当

setup（）

函数运行时，我设置了

isPushNotificationChecked

ref，然后在onMounted函数中将其更新为不同ajax调用的响应

代码如下：

<template>
  <ion-checkbox
    slot="start"
    v-model="isPushNotificationChecked"
    @update:modelValue="updatePushNotifications"
  ></ion-checkbox>
</template>

<script>
import {
  IonCheckbox,
} from "@ionic/vue";
import { defineComponent, ref, onMounted } from "vue";
import axios from "axios";
import useToast from "@/services/toast";

export default defineComponent({
  name: "Settings",
  components: {
    IonCheckbox,
  },
  setup() {
    const isPushNotificationChecked = ref(false);

    onMounted(async () => {
      const response = await axios.get("settings");
      // Since I change the value here @update:modelValue in template triggers updatePushNotifications
      isPushNotificationChecked.value = response.data.notifications_enabled;
    });

    // This gets triggered on page load when it shouldn't
    const updatePushNotifications = async () => {
      if (isPushNotificationChecked.value) {
        axios.post("notifications/enable");
      } else {
        axios.post("notifications/disable");
      }

      useToast().success("Push notifications updated");
    };

    return {
      isPushNotificationChecked,
      updatePushNotifications,
    };
  },
});
</script>

进口{
IonCheckbox，
}来自“@IONAL/vue”；
从“vue”导入{defineComponent，ref，onMounted}；
从“axios”导入axios；
从“@/services/toast”导入UseToos；
导出默认定义组件({
名称：“设置”，
组成部分：{
IonCheckbox，
},
设置（）{
常量isPushNotificationChecked=ref（false）；
onMounted（异步（）=>{
const response=等待axios.get（“设置”）；
//因为我在这里更改了值，所以模板中的@update:modelValue会触发updatePushNotifications
isPushNotificationChecked.value=response.data.notifications\u已启用；
});
//这在页面加载时被触发，但它不应该被触发
const updatePushNotifications=async（）=>{
如果（isPushNotificationChecked.value）{
axios.post（“通知/启用”）；
}否则{
axios.post（“通知/禁用”）；
}
useToos（）.success（“推送通知已更新”）；
};
返回{
我已检查过PushNotification，
更新PushNotifications，
};
},
});

---

如何将ref值设置为ajax调用的响应，而不删除单击复选框并触发ajax调用的行为？

我的解决方案是使用在

onMounted（）

函数中初始化的监视程序，并删除

@update:modelValue=“updatePushNotifications”

：

进口{
IonCheckbox，
}来自“@IONAL/vue”；
从“vue”导入{defineComponent，ref，onMounted}；
从“axios”导入axios；
从“@/services/toast”导入UseToos；
导出默认定义组件({
名称：“设置”，
组成部分：{
IonCheckbox，
},
设置（）{
常量isPushNotificationChecked=ref（false）；
onMounted（异步（）=>{
const response=等待axios.get（“设置”）；
isPushNotificationChecked.value=response.data.notifications\u已启用；
//ajax调用后的观察程序设置。
手表（isPushNotificationChecked，（值）=>{
如果（值）{
axios.post（“通知/启用”）；
}否则{
axios.post（“通知/禁用”）；
}
useToos（）.success（“推送通知已更新”）；
});
});
返回{
isPushNotificationChecked
};
},
});

<template>
  <ion-checkbox
    slot="start"
    v-model="isPushNotificationChecked"
  ></ion-checkbox>
</template>

<script>
import {
  IonCheckbox,
} from "@ionic/vue";
import { defineComponent, ref, onMounted } from "vue";
import axios from "axios";
import useToast from "@/services/toast";

export default defineComponent({
  name: "Settings",
  components: {
    IonCheckbox,
  },
  setup() {
    const isPushNotificationChecked = ref(false);

    onMounted(async () => {
      const response = await axios.get("settings");
      isPushNotificationChecked.value = response.data.notifications_enabled;

      // Watcher setup after ajax call.
      watch(isPushNotificationChecked, (value) => {
        if (value) {
          axios.post("notifications/enable");
        } else {
          axios.post("notifications/disable");
        }

        useToast().success("Push notifications updated");
      });
    });

    return {
      isPushNotificationChecked
    };
  },
});
</script>