Data table from array in VUE

Question

I am trying to convert this JavaScript code to Vue JS ES5. This is my Javascript that displays the table:

window.addEventListener("load", function(){

  // simple array
  var data = ["cat", "mouse", "bird", "goat", "monkey", "giraffe","cow","donkey","mice", "camel", "elephant", "bufalo", "jade","zebra","goose","hen","zat"];
  // html table
  var perrow = 4, // 7 items per row
      html = "<table><tr>";
  // Loop through array and add table cells
  for (var i=0; i<data.length; i++) {
    html += "<td>" + data[i] + "</td>";
    // Break into next row
    var next = i+1;
    if (next%perrow==0 && next!=data.length) {
      html += "</tr><tr>";
    }
  }
  html += "</tr></table>";

  document.getElementById("container").innerHTML = html;
});

how can I convert to vue js. my vue code is

<script type="text/javascript">
var appVM= new Vue({
     el:'#app',
mydata:{["cat", "mouse", "bird", "goat", "monkey", "giraffe","cow","donkey","mice", "camel", "elephant", "bufalo", "jade","zebra","goose","hen","zat"]; 
     },
</script>
<table id="myTable"  class="display table" width="100%">
  <tbody> 
  <tr v-for="data in mydata">
        <td> data to appear in this section</td>    
   </tr>
  </tbody>
</table>

The sample code will fail because it has syntax errors in it: misplaced comma and missing closing parenthesis. — Mouser
– Mouser, Commented Jan 19, 2020 at 13:37
So you want to have the array entries laid out in a table with 4 entries on each row? As this isn’t really tabular data, why not use flexbox instead? — agrm
– agrm, Commented Jan 19, 2020 at 19:42

agrm · Accepted Answer · 2020-01-19 20:25:37Z

I know you are asking for a table based layout, but as the array doesn't really contain tabular data I would go with a CSS styled flexbox or grid based layout instead.

Flex

var appVM = new Vue({
  el: '#app',
  data: {
    entries : ["cat", "mouse", "bird", "goat", "monkey", "giraffe", "cow", "donkey", "mice", "camel", "elephant", "bufalo", "jade", "zebra", "goose", "hen", "zat"]
  }
});

#app {
  display: flex;
  flex-wrap: wrap;
}
.entry {
  flex: 1 0 25%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="entry in entries" class="entry">{{ entry }}</div>
</div>

Grid

var appVM = new Vue({
  el: '#app',
  data: {
    entries : ["cat", "mouse", "bird", "goat", "monkey", "giraffe", "cow", "donkey", "mice", "camel", "elephant", "bufalo", "jade", "zebra", "goose", "hen", "zat"]
  }
});

#app {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <div v-for="entry in entries" class="entry">{{ entry }}</div>
</div>

tony19 · Accepted Answer · 2022-07-15 04:24:28Z

1

By reading the manual: https://v2.vuejs.org/v2/guide/list.html

You need to take the following steps:

name the table app as a reference
Make sure the syntax is correct for the javaScript object inside the constructor function.
populate the data property with an object containing an array with key mydata
call the contents of an item with {{ data }} inside your td

var appVM = new Vue({
  el: '#app',
  data: {mydata : ["cat", "mouse", "bird", "goat", "monkey", "giraffe", "cow", "donkey", "mice", "camel", "elephant", "bufalo", "jade", "zebra", "goose", "hen", "zat"]}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<table id="app" class="display table" width="100%">
  <tbody>
    <tr v-for="data in mydata">
      <td> {{ data }}</td>
    </tr>
  </tbody>
</table>

edited Jul 15, 2022 at 4:24

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 19, 2020 at 13:46

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

1 Comment

Hotdot Cyber Over a year ago

Thanks, what i want is the data to be divided into columns and rows not one column. The javascript displays 4 columns and 5 rows

Collectives™ on Stack Overflow

Data table from array in VUE

2 Answers 2

Flex

Grid

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Flex

Grid

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related