typescript - 我在表单中提交数据，但是方法不能被调用？

Question

我正在使用 van-button 按钮在前台提交表单数据。我也在van-form中使用了@submit属性。在@submit中，我调用了自己的方法，但是定义的方法不能调用。是什么原因？

1.这是前台的代码

<van-form @submit="addHolidayInfo">

  <div style="margin: 16px;">
    <van-button round type="info" native-type="submit">submit</van-button>
    <van-button type="default" round @click="reset">reset</van-button>
  </div>

</van-form>

2.这是我的方法

private addHolidayInfo(values: any) {
  console.log("--------------------------");
  Toast.loading({
    message: "...",
    forbidClick: true,
    duration: 0,
  });
  api
    .post("/pm/holidayLog/addHolidayInfo", values)
    .then((Response: any) => {
      const msg = Response.data as Msg;
      if (msg.success) {
        Toast.success(msg.msg);
        this.$router.push("/pm/holiday");
      } else {
        Toast.fail(msg.msg);
      }
    })
    .catch((err: Error) => {
      Toast.fail("！！！");
    });
}

标签： typescriptvue.js

Answer 1

可能您应该添加按钮 type='submit' 来触发提交事件。

<van-form @submit="addHolidayInfo">

  <div style="margin: 16px;">
    <van-button type="submit" round type="info" native-type="submit">submit</van-button>
    <van-button type="default" round @click="reset">reset</van-button>
  </div>

</van-form>