CODEWITHSUNDEEP
vue.jsvuetify.js
Wayne
Wayne

Reputation: 1

How to display nested lists in a table in Vuetify

I am new to Vuetify, and I have a list, which contains other three lists in it, and I am trying to print out the information in each list using a table. And here is my code:

This is the code for the table:

 <tr
   v-for="items in rows">
     <td v-for="things in items">{{things}}</td>
 </tr>

And this is my list:

rows: [
    [
      'Nick',
      '19',
      'male'
    ],
    [
      'Bill',
      '23',
      'male'
    ],
    [
      'Kathy',
      '22',
      'female'
    ],
  ]

I tried but it prints the three lists for three times, but my goal is to get the elements in one list shown in one line. Thank you in advance. First time posting a question, please point out any informal styles I used!

Upvotes: 0

Views: 769

Answers (1)

JJ Labajo
JJ Labajo

Reputation: 374

Check out this snippet I've made:

https://codesandbox.io/s/elastic-agnesi-1hl1e

EDIT

html code: 

<div id="app">
        <table>
            <tr v-for="item in rows">
                <td v-for=" thing in item ">{{ thing }}</td>
            </tr>
        </table>
    </div>

js code:

var app = new Vue({
  el: "#app",
  data: function() {
    return {
      rows: [
        ["Nick", "19", "male"],
        ["Bill", "23", "male"],
        ["Kathy", "22", "female"]
      ],
      greetings: "Hello, I'm Joe"
    };
  }
});

Upvotes: 1

Related Questions