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

我正在尝试使用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>

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

铬输出

• [“名称字段是必需的。”]
• [“说明字段是必需的。”]

我基本上希望输出所有错误。例如：

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

const-app=新的Vue({
el:“#应用程序”，
数据：{
错误：{
描述：[“描述字段是必需的。”，“另一个错误”]，
名称：[“名称字段是必需的。”]，
}
}
});
编辑这里有一个代码片段示例：

由于

错误是一个对象，因此您的VUE组件如下所示：

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


{{key}}
{{error}}


它的输出如下：


名称错误1
描述错误1
名称错误2
描述错误2
如果您想从[“名称字段是必需的”]中提取“名称字段是必需的”，理论上，您应该使用索引0：

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






或者更好：

<div v-for="(error,key) in errors" >
    <ul v-for="value in error" >
        <li v-text="key+': '+value" ></li>
    </ul>
</div>





之前尝试过，但得到了：name[“name字段是必需的。”]description[“description字段是必需的。”]，如果数组中有多个值，则会产生问题。请参阅：请参阅我编辑的答案：如何在每个字段上指定字段名，如名称字段1错误名称字段2错误