title: Vue.js Iterating over properties dynamically
body: <h2>Problem overview:</h2>
  
  <p>I'm trying to learn some Vue.js, and I quickly ran into a use case I can't wrap my head around (yay!)</p>
  
  <p>I'm trying to create a Vuejs table component. The looks like the following:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="mytr"&gt;
      &lt;thead&gt;
      &lt;tr&gt;
        &lt;th v-for="header in headers" :key="header.id"&gt;
          {{header}}
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tr v-for="todo in todos" :key="todo.id"&gt;
        &lt;td&gt;{{todo.title}}&lt;/td&gt;
        &lt;td&gt;{{todo.completed}}&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Tablerow',
    data () {
      return {
        headers: ['title', 'completed'],
        todos: []
      }
    },
    mounted () {
      fetch('https://jsonplaceholder.typicode.com/todos/').then(response =&gt; response.json()).then((data) =&gt; {
        console.log(data)
        this.todos = data
      })
    }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>As you can see I'm using the api from <a href="https://jsonplaceholder.typicode.com/todos/" rel="nofollow noreferrer">jsonplaceholder</a>.</p>
  
  <p>The question is: can this be written with a syntax similar to the following:</p>
  
  <pre><code>&lt;tr v-for="todo in todos" :key="todo.id"&gt;
    &lt;td v-for="header in headers" :key="header.id"&gt;
      {{todo.header}}
    &lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This would allow me to specify the columns I want to print from my data making this component more portable and usable.</p>
  
  <p>Please forgive me if the question is too basic. I have o-kay pure JS background, Python/Django, and the rest is fairly low level.</p>