如何在二维数组上使用 v-for

Question

我想用 Vue.js 遍历二维数组，但是当我在另一个v-for中使用嵌套v-for时，我收到此错误：

• 表达式中的 v-for 别名"case"无效：v-for="casein line"

new Vue({
  el: "#app",
  data: {
    chessboard: [
      [null,null,null,null],
      [null,null,null,null],
      [null,null,null,null],
      [null,null,null,null]
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="chessboard">
    <div v-for="line in chessboard">
      <div v-for="case in line">
        <button></button>
      </div>
    </div>
  </div>
</div>

我应该怎么做才能让它工作？

谢谢你的帮助。

Answer 1

case是一个保留字:)（开关箱）

https://jsfiddle.net/3k8dghvo/

<div id="app">
  <div class="chessboard">
    <div v-for="line in chessboard">
      <div v-for="cell in line">
        <button></button>
      </div>
    </div>
  </div>
</div>