Question

我正在尝试使用vue输出所有Laravel错误。我正在获取输出，但是我不知道如何格式化输出。

Vue组件

        data() {
          return {
              status: '',
              submitted: false,
              message: '',
              name: '',
              description: '',
              errors: null,
           }
        },

        //This axios request is wrapped into the same component
        axios({
                method: 'POST',
                url: '/',
                data: {
                    name: this.name,
                    description: this.description
                }
            }).then(function (response) {

               //Clears form submit fields
                this.clearValues();
                this.message = response;   

            }.bind(this))
            .catch(error => {
                    error => this.status = error.response.data.status;
                    this.errors = error.response.data.errors;
                    console.log(error.response.data.errors);
            });
        }

Vue组件模板

<ul v-for="(error, index) in errors">
   <li>{{error}}</li>   
</ul>

控制台中的JSON输出

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

Chrome输出

[“名称字段为必填。” ]
[“必填字段。” ]

我实质上想输出所有错误。示例：

名称错误1
名称错误2
描述错误1
描述错误2

const app = new Vue({
  el: '#app',

  data:{
    errors: {
      description: [ "The description field is required." , "Another error"],
      name: [ "The name field is required." ],
    }
  }

});

Edit here is a snippet example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17-beta.0/vue.js"></script>

<div id="app">
  <ul v-for="(error, key) in errors">
   <li v-text="error[0]" ></li>   
  </ul>
</div>

Answer 1

如果要从[“名称字段为必填项”]中提取“名称字段为必填项”，则理论上应使用索引0：

int

或更好：

<ul v-for="(error, key) in errors">
   <li v-text="key" ></li>
   <li v-text="error[0]" ></li>   
</ul>

Answer 2

由于error是一个对象，因此您的VUE组件将如下所示：

<ul v-for="(error, key) in errors">
   <li>{{key}}</li>
   <li>{{error}}</li>   
</ul>

它将输出为：

名称错误1
描述错误1
名称错误2
描述错误2

使用v-for格式化问题以使用axios获取vue组件中的所有laravel错误

2 个答案: