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>

Vuejs 嵌套的 foreach 循环不起作用

Vuejs nested foreach loop not working

vue.js

v-for