通过 Vuejs Axios 存储库将错误数据传递给组件

Question

显然我想要做的如下； 使用 vuejs 注册时，我想在注册组件中显示从 Laravel 返回的错误。 但我不知道该怎么做。

如果您在回复时考虑到我是 vuejsi 的初学者，我将不胜感激。

控制台显示的错误返回如下。

{
    "name": [
        "The name field is required."
    ],
    "email": [
        "The email field is required."
    ],
    "password": [
        "The password field is required."
    ]
}

注册.vue

<template>
    <div>
        <h1>Register</h1>
        <div>
            <label>name</label>
            <input type="text" v-model="user.name">
        </div>
        <div>
            <label>mail</label>
            <input type="email" v-model="user.email">
        </div>
        <div>
            <label>password</label>
            <input type="password" v-model="user.password">
        </div>
        <div>
            <label>password</label>
            <input type="password" v-model="user.password_confirmation">
        </div>
        <div>
            <button @click="register">Register</button>
        </div>
    </div>
</template>

<script>
import axios from "axios";

export default {
    name: "Register",
    data() {
        return {
            user: {
                name: null,
                email: null,
                password: null,
                password_confirmation: null
            },
            isUser: false,
            errors: {}
        }
    },
    methods: {
        register() {
            this.$store.dispatch("register", {...this.user, isUser: this.isUser})
        }
    }
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'
import axios from "axios";
import router from '../router';

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        token: "",
    },
    mutations: {
        setToken(state, token) {
            state.token = token
        },
        clearToken(state) {
            state.token = ""
        },
    },
    actions: {
        initAuth({commit, dispatch}) {
            let token = localStorage.getItem('token')
            if (token) {
                commit('setToken', token)
            } else {
                router.push('/login')
                return false;
            }
        },
        login({commit, dispatch, state}, autData) {

            return axios.post(
                '/api/login', {
                    email: autData.email,
                    password: autData.password
                })
                .then(response => {
                    commit('setToken', response.data.token)
                    localStorage.setItem('token', response.data.token)
                    router.push('/')
                    console.log(response)
                })
                .catch(error => {
                    console.log(error)
                })
        },
        register({commit, dispatch, state}, autData) {

            return axios.post(
                '/api/register', {
                    name: autData.name,
                    email: autData.email,
                    password: autData.password,
                    password_confirmation: autData.password_confirmation
                })
                .then(response => {
                    commit('setToken', response.data.token)
                    router.push('/')
                    console.log(response)
                })
                .catch(error => {
                    console.log(error.response.data.errors);
                })
        },
        logout({commit, dispatch, state}) {
            commit('clearToken')
            localStorage.removeItem('token')
            router.push('/login');
        }

    },
    getters: {
        isAuthenticated(state) {
            return state.token !== ""
        }
    },
    modules: {},
})

Answer 1

您可以使用 Vuex 从 Api 设置和获取错误，就像使用 token 一样。

store.js

   state: {
            token: "",
            errors: null
    },
    mutations: {
            setErrors(state, errors) {
              state.errors = errors
            }
            ...
    },
    actions: {
      ...
      .catch(error => {
          commit('setErrors', error.response.data.errors)
      })
     ...

注册.vue

    <template>
    <div>
        <h1>Register</h1>
        <div v-for="(item, key) in user" :key="key">
            <label>{{key}}</label>
            <input :type="key.includes('password') ? 'password' : 'text'" v-model="user[key]">
            <div v-if="errors && errors[key]">
                 <p v-for="(error, keyError) in errors[key]" :key="`error-${keyError}`">
                     {{error}}
                 </p>
            </div>
        </div>
        <div>
            <button @click="register">Register</button>
        </div>
    </div>
   </template>
    
    <script>
    import axios from "axios";
    
    export default {
        name: "Register",
        computed: {
          errors() {
             return this.$store.state.errors;
           }
        },
      ...