Vue.js动态遍历属性

Question

问题概述：

我正在尝试学习一些Vue.js，但很快就遇到了一个用例，我无法解决问题（是！）

我正在尝试创建Vuejs表组件。 外观如下：

<template>
  <div class="mytr">
    <thead>
    <tr>
      <th v-for="header in headers" :key="header.id">
        {{header}}
      </th>
    </tr>
    </thead>
    <tr v-for="todo in todos" :key="todo.id">
      <td>{{todo.title}}</td>
      <td>{{todo.completed}}</td>
    </tr>
  </div>
</template>

<script>
export default {
  name: 'Tablerow',
  data () {
    return {
      headers: ['title', 'completed'],
      todos: []
    }
  },
  mounted () {
    fetch('https://jsonplaceholder.typicode.com/todos/').then(response => response.json()).then((data) => {
      console.log(data)
      this.todos = data
    })
  }
}
</script>

如您所见，我正在使用jsonplaceholder中的api。

问题是：可以使用类似于以下内容的语法编写该代码：

<tr v-for="todo in todos" :key="todo.id">
  <td v-for="header in headers" :key="header.id">
    {{todo.header}}
  </td>
</tr>

这将使我能够从数据中指定要打印的列，从而使该组件更易于携带和使用。

如果这个问题太基本了，请原谅我。 我有纯JS的背景，Python / Django，其余的水平很低。

Answer 1

由于每个header都是一个字符串，因此可以使用方括号表示法来访问todo的属性

<tr v-for="todo in todos" :key="todo.id">
  <td v-for="header in headers" :key="header.id">
    {{todo[header]}}
  </td>
</tr>