vue.js - Vuejs嵌套的foreach循环不起作用

Question

我有以下 HTML

<div id="app">
  <p>{{ message }}</p>
  <span v-for="word in words">
      {{word.name}} <br/>
      {{word.id}} <br/>
    <span v-for="mark in marks">
          {{mark}} 
    </span>
    <br/>
  </span>
</div>

我有以下脚本

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    words: [{
        id: 1,
        name: "sam",
        marks: [1, 2, 4]
      }, {
        id: 1,
        name: "name",
        marks: [1, 12, 3]
      }

    ]
  }

})

我没有得到预期的分数。

Answer 1

它应该如下，就像mark里面的一个元素一样word：

<div id="app">
  <p>{{ message }}</p>
  <span v-for="word in words">
      {{word.name}} <br/>
      {{word.id}} <br/>
    <span v-for="mark in word.marks">
          {{mark}} 
    </span>
    <br/>
  </span>
</div>