Question

我正在使用laravel（带有vue和vuex）在Web应用程序上创建忘记密码的功能。我找到了一个不错的教程（https://codebriefly.com/vue-js-reset-password-laravel-api/）。我尝试在本教程中应用vuex，但不起作用。

根据本教程

mtcars %>% filter(abs(qsec %% 1 - 0.5) < 1e-10)

我应用了Vuex

ForgotPassword.vue

<script>
export default {
    data() {
      return {
        email: null,
        has_error: false
      }
    },
    methods: {
        requestResetPassword() {
            this.$http.post("/reset-password", {email: this.email}).then(result => {
                this.response = result.data;
                console.log(result.data);
            }, error => {
                console.error(error);
            });
        }
    }
}
</script>

我创建的

Vuex操作

  methods: {
    ...mapActions(["requestResetPassword"]),
    request() {
      this.requestResetPassword({
        email: this.email
      })
        .then(response => {
          toast.fire({
            type: "success",
            title: "Password reset email sent"
          });
          this.$router.push({ name: "home" });
        })
        .catch(error => {
          console.error(error);
          });
        });
    }

可处理的Api

 requestResetPassword(data){
        return new Promise((resolve,reject) => {
            axios.post('/reset-password',{
                email: data.email
            })
            .then(response =>{
                resolve(response)
            })
            .catch(error =>{
                reject(error)
            })
        })
    }

当我输入用于发送密码重置链接的电子邮件地址时，错误出现，并显示：

消息：给定的数据无效。

电子邮件：电子邮件字段为必填项。

我使用邮递员测试API，并且可以正常工作

我检查了输入字段是否为空，但事实证明输入字段不为空

有没有办法在本教程中应用vuex？谢谢

Answer 1

在Postman中，您将email字段作为参数而不是正文中的序列化数据。 vue-resource包的post方法将传递给它的数据设置为正文，而不是URL参数。将电子邮件添加到请求参数中，或者在您的API中，确保从请求正文而不是URL参数中获取数据。

laravel（带有vue和vuex）覆盖sendResetLinkEmail但无法将数据传递到api控制器

根据本教程

我应用了Vuex

1 个答案: