vue 中的异步计算

Question

这是我的代码。按钮加载不起作用。我试图在调用 api 时然后我想在按钮中显示加载程序，但这里 v-if 也不起作用。当我调用 api 时，它将为 true，但不会再次为 false。我收到错误

   <template>
   <Layout>
    <div class="grid grid-cols-3">
        <div></div>
        <div class="my-20 border-2 rounded-md p-5 bg-white">
            <h5 class="text-center mb-5 text-3xl">Forget password</h5>
            <div class="mb-4">
                <div class="mb-2 font-bold"><label>Email</label></div>
                <input type="email" class="w-full border-2 border-gray-300 rounded-lg p-2 px-4"
                    placeholder="e. g. [email protected]" v-model="email" name="email" />
            </div>
            <div class="mb-3">
                <button type="primary" :onclick="handleSubmit" :disabled="disabled" 
        class="w-full btn-class">
                    <i v-if="loading" class="fa-solid fa-spinner fa-spin mr-2"></i>Send Email
                </button>
            </div>
            <div class="text-center">
                <router-link to="/signin" class="text-blue-500 hover:underline ml-3">
                    Go Back
                </router-link>
            </div>
        </div>
    </div>
  </Layout>
  </template>


  <script setup>

 import { computed, ref, watchEffect } from 'vue';
  import { useAuthStore } from '../store'
  import { Layout } from '../components/Layout';

 const userStore = useAuthStore();
 const loading = computed(() => userStore.loading)

 const email = ref('')
 const disabled = computed(() => !email.value);

const handleSubmit = async () => {
  await userStore.forgetPassword({ email: email.value });
 }

 </script>

我尝试过使用 nextTick() 并计算

Answer 1

如果我理解正确的话，您只想在单击按钮后添加微调器。然后，在异步函数完成后移除微调器。

恕我直言，加载没有设置回 false。我建议：

const loading = ref(false);

const handleSubmit = async () => {
  loading.value = true;
  try {
    await userStore.forgetPassword({ email: email.value });
  } catch (error) {
    console.error('Error:', error);
  }
  loading.value = false;
}