![KEY]( "KEY")
本文介绍了从错误对象中提取文本(通过响应)并在 vue 模板中操作或显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试显示表单的错误，我正在使用一个数组进行操作，并为每个显示它们，问题是它向我显示了错误，但带有括号和引号.
mutations.js
createUser(state) {var url = urlUseraxios.post(网址，{id: state.idUser,名称:state.newUser.name，电子邮件:state.newUser.email，密码:state.newUser.password，//cant_client: state.newUser.cant_client,cant_vehicle: state.newUser.cant_vehicle//url: window.location.host + "/acceso/";+ md5(state.newUser.password)}).那么(响应=> {state.newUser = {ID: ''，姓名: ''，电子邮件: ''，密码: ''，网址:''}state.errorsLaravel = []toastr.success('Usuario generado con éxito')}).catch(错误=>{<!-- 这里-->state.errorsLaravel = error.response.data<!-- 这里-->})},
index.vue
<div class="row"><div class="form-group col-lg-3"><label for="name">Nombre</label><input v-validate="'required|min:4|max:190'";:class="{'input': true, 'is-invalid': errors.has('name') }";类型=文本"名称=名称"类=表单控制"v-model=newUser.name"><div v-for="(error, index) in errorsLaravel";类=文本危险":key=索引"><p>{{error.name }}</p>
<div class="col-lg-3 mt-2"><标签></标签>
</表单>
请教我这个方法，谢谢你的帮助
解决方案
试试这个.
<p>{{key}} : {{ error }} : {{ error[0] }}</p>
这将为您提供错误的 keys 和附加到密钥的 error 本身.此外，如果您有附加到特定键的 errors 数组，您也可以像我给出的索引 0 error[0] 示例一样对其进行迭代.>
如果内部循环处理错误数组
<p v-for=(errorItem, index) in error":key="index">{{errorItem }}</p>
此外，如果你想在 keys 的基础上放置一些条件，你可以在循环内部使用 key 并制作你的逻辑.
如果出现与特定键相关联的选择性错误
<div v-if="key === 'name'"><p v-for=(errorItem, index) in error":key="index">{{errorItem }}</p>
错误中的括号和引号意味着可以有多个error 指定给某个key.这就是为什么错误在链接到特定键的数组中.一个key可以容纳多个errors
I am trying to show the errors of the form, I am doing it with an array and I show them with a for each the problem is that it shows me the error but with brackets and quotes.
mutations.js
createUser(state) {
var url = urlUser
axios.post(url, {
id: state.idUser,
name: state.newUser.name,
email: state.newUser.email,
password: state.newUser.password,
//cant_client: state.newUser.cant_client,
cant_vehicle: state.newUser.cant_vehicle
//url: window.location.host + "/acceso/" + md5(state.newUser.password)
}).then(response => {
state.newUser = {
id: '',
name: '',
email: '',
password: '',
url: ''
}
state.errorsLaravel = []
toastr.success('Usuario generado con éxito')
}).catch(error => {
<!-- here -->
state.errorsLaravel = error.response.data
<!-- here -->
})
},
index.vue
<form action="POST" v-on:submit.prevent="createUser">
<div class="row">
<div class="form-group col-lg-3">
<label for="name">Nombre</label>
<input v-validate="'required|min:4|max:190'"
:class="{'input': true, 'is-invalid': errors.has('name') }"
type="text"
name="name"
class="form-control" v-model="newUser.name">
<div v-for="(error, index) in errorsLaravel" class="text-danger" :key="index">
<p>{{ error.name }}</p>
</div>
</div>
<div class="col-lg-3 mt-2">
<label></label>
<button type="submit" class="btn btn-success form-control"><i class="fas fa-plus-square"></i> Guardar</button>
</div>
</div>
</form>
show me this way, please your help thanks
解决方案
Try this.
<div v-for="(error, key) in errorsLaravel" class="text-danger" :key="key">
<p>{{key}} : {{ error }} : {{ error[0] }}</p>
</div>
This will give you the keys of the errors and error itself that is attached to the key. Also, if you have array of errors that is attached to the specific key you can iterate it as well like I gave an example of index 0 error[0].
In case of inside loop to work with array of erros
<div v-for="(error, key) in errorsLaravel" class="text-danger" :key="key">
<p v-for="(errorItem, index) in error" :key="index">{{ errorItem }}</p>
</div>
Moreover, if you want to put some conditions on the basis of keys , you can use key inside the loop and make your logics.
In case of selective errors that are linked to specific key
<div v-for="(error, key) in errorsLaravel" class="text-danger" :key="key">
<div v-if="key === 'name'">
<p v-for="(errorItem, index) in error" :key="index">{{ errorItem }}</p>
</div>
</div>
Bracket and quotes inside the error means that there can be more than one error that are specified to certain key. That's why errors are in array that are linked to specific key. One key can hold more than one errors
这篇关于从错误对象中提取文本(通过响应)并在 vue 模板中操作或显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！