[Vuejs]-Print data in table using for loop in VueJS

by

0👍

Maybe this works for you:

new Vue({
  el: '#app',
  data: {
    exampleObject: {
      "fred": {
        "foo": "bar",
        "baz": "qux",
        "fred": "xzzy"
      },
      "thud": {
        "foo": "bar",
        "baz": "qux",
        "fred": "xzzy"
      },
      "plugh": {
        "foo": "bar",
        "baz": "qux",
        "fred": "xzzy"
      }
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<div id="app">
  <table>
    <tr v-for="(values, key) in exampleObject" v-bind:key="key">
      <th scope="row">{{ key }}</th>
      <td v-for="(val, keyCol) in values" v-if="keyCol != 'baz'" v-bind:key="keyCol">{{ val }}</td>
    </tr>
  </table>
</div>

The same example but on codepen:
https://codepen.io/fabiogarcia/pen/poyprYw

0👍

Try like it:

<tr v-for="(valuesParent, key) in object" v-bind:key="valuesParent">
  <th scope="row">{{ key }}</th>
  <td v-for="(values, key) in valuesParent" v-bind:key="values">{{ values }}</td>
</tr>

Leave a comment