vant4 避免重复提交按钮 设置按钮loading状态

展示：

代码：

<template>
  <van-form @submit="handleSubmit">
    <van-cell-group inset>
      <van-field
        v-model="keyword"
        name="keyword"
        label="关键词"
        placeholder="请输入"
        :rules="[{ required: true, message: '请填写keyword' }]"
      />
      <van-field
        v-model="boundary"
        name="boundary"
        label="位置"
        placeholder="请输入"
        :rules="[{ required: true, message: '请填写boundary' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button round block type="primary" native-type="submit" :loading="loading">
        提交
      </van-button>
    </div>
  </van-form>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { showSuccessToast,showFailToast, showLoadingToast, showToast } from 'vant';



const keyword = ref('');
const boundary = ref('');
const loading = ref(false);

const handleSubmit = async (values) => {
  if (!values.keyword || !values.boundary) {
    showToast('Keyword and boundary are required');
    return;
  }

  try {
    loading.value = true; // 显示加载中

    const response = await axios.post('http://localhost:8071/api/poi/fetchAndStorePois', {
      keyword: values.keyword,
      boundary: values.boundary
    });

    if (response.data.code === 0) {
      showSuccessToast(response.data.message);
      await fetchData();
    } else {
      showFailToast(`Error: ${response.data.message}`);
    }
  } catch (error) {
    showFailToast('Error fetching and storing data');
    console.error('Error fetching and storing data:', error);
  } finally {
    loading.value = false; // 隐藏加载中
  }
};
</script>