我有一个 API 抛出这个对象错误(流明(
{
"title":["The title field is required."],
"body":["The body field is required."],
"days_after":["The days after field is required."]
}
然后,我将此错误分配给mess
变量,并且我尝试使用此代码将每个错误输出为单独的警报
<v-alert v-for="me in mess" v-if="mess" error dismissible v-model="mess">
{{me[0]}}
</v-alert>
但是,当我消除 1 个错误时,它们都被关闭/删除
donMateo有一个很好的解决方案,但是如果你的目的是关闭消息会从错误对象中清除消息,你实际上可以这样做(有点(。您只需要v-model
单个行,而不是整个mess
对象。(此外,您不能v-model
别名,因此无法v-model="me"
。
new Vue({
el: '#app',
data() {
return {
mess: {
"title": ["The title field is required."],
"body": ["The body field is required."],
"days_after": ["The days after field is required."]
}
}
}
});
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.0/vue.min.js"></script>
<script src="//unpkg.com/vuetify@0.17.6/dist/vuetify.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons" rel="stylesheet" />
<link href="//unpkg.com/vuetify@0.17.6/dist/vuetify.min.css" rel="stylesheet" />
<div id="app">
<v-app>
<div>
<v-alert v-for="me, index in mess" color="info" icon="info" dismissible v-model="mess[index]">
{{me[0]}}
</v-alert>
{{JSON.stringify(mess)}}
</div>
</v-app>
</div>
v-model 绑定负责警报的可见性,因此需要一个布尔属性。让我们稍微改变一下数据的结构:
new Vue({
el: '#app',
data () {
return {
errors: [
{text: "The title field is required.", show:true},
{text: "The body field is required.", show:true},
{text: "The days after field is required.", show:true}
]
}
}
})
<div id="app">
<v-app>
<div>
<v-alert v-for="me in errors" color="info" icon="info" dismissible v-model="me.show">
{{me.text}}
</v-alert>
</div>
</v-app>
</div>
瞧!代码笔演示