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

Question

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

• 表达式中的 v-for 别名“case”无效：v-for="case in 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>