javascript - 是 <match v-for ='match in matches' v-bind :match ='match' ></match> incorrect? 我可以在同一元素的 v-bind 中使用来自 v-for 的匹配项吗？

Question

我正在尝试为匹配中的每个匹配呈现一些 HTML，但是，我不太确定 <match v-for='match in matches' v-bind:match='match'></match>实际上是正确的。

更具体地说，我不确定我是否可以使用 v-bind:match='match'在与循环相同的元素上 v-for='match in matches' . match中包含的信息是否实际上作为 prop 发送给组件？

Answer 1

是的。 这是一个工作示例:

Vue.component('match', 
{
props :['match'],
template : `<div><span>{{match.matchName}}</span></div>`

})
var mapp = new Vue({
  el: "#app",
  data: {
    matches: [
      { matchName: "First Match"},
      { matchName: "Second Match"},
      { matchName: "Yet another Match"}
    ]
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.9/vue.js"></script>
<div id="app">
<match v-for='match in matches' v-bind:match='match'></match>
</div>