如何为每次迭代分配 v-model

Question

我有一个 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 个错误时，所有错误都是 dismiss/remove

Answer 1

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>

瞧！ CodePen demo

Answer 2

donMateo 有一个很好的解决方案，但如果您的意图是关闭消息会清除错误对象中的消息，您实际上可以这样做（某种程度上）。您只需要 v-model 单个行，而不是整个 mess 对象。（另外，你所以它不能 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

How to assign v-model for each iteration

vue.js

vue-component

vuejs2

vuetify.js