how to mount Vue app instance to a div container in HTML and use v-for directive to iterate?

Kiamnchovv
February 20, 2023
263 views
2 votes
4 Answers

This is my js and I already finsihed

var app = new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [
      { id: 1, name: "Test Name 1", phone: "587-917-1241" },
      { id: 2, name: "Test Name 2", phone: "250-682-3553" },
      { id: 3, name: "Test Name 3", phone: "707-848-0782" },
    ],
  },
});

And my CSS

table {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  width: 500px;
  border-collapse: collapse;
  border: 2px solid #444777;
  margin: 10px;
}

table th {
  background: #444777;
  color: #fff;
  padding: 5px;
  min-width: 30px;
}

table td {
  padding: 5px;
  border-right: 2px solid #444777;
}

table tbody tr:nth-child(2n) {
  background: #d4d8f9;
}

I want to mount the Vue app instance to a div container and use v-for directive to iterate through the columns and rows array to generate the table header
and body, what should I do?

I used this vue version<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

expected outcome:

ID      Full Name      Phone
1       Test Name 1    587-917-1241
2       Test Name 2    250-682-3553
3       Test Name 3    707-848-0782

Answers

You can write your template string in js like this:

var app = new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [
      { id: 1, name: "Test Name 1", phone: "587-917-1241" },
      { id: 2, name: "Test Name 2", phone: "250-682-3553" },
      { id: 3, name: "Test Name 3", phone: "707-848-0782" },
    ],
  },
  template: `
    <table>
      <thead>
        <tr>
          <th v-for="(value, key) in column" :key="key">{{ value }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.phone }}</td>
        </tr>
      </tbody>
    </table>
  `,
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

var app = Vue.createApp({

  data() {
    return{
      column: {
         id: "ID",
         name: "Full Name",
         phone: "Phone",
      },
      rows: [
         { id: 1, name: "Test Name 1", phone: "587-917-1241" },
         { id: 2, name: "Test Name 2", phone: "250-682-3553" },
         { id: 3, name: "Test Name 3", phone: "707-848-0782" },
       ],
     },
  }
}).mount('#app');

You can write like this

Here is an example to mount Vue app in a HTML element-

<html>
  <div id="app">
    <table>
      <thead>
        <tr>
          <th v-for="(value, key) in column" :key="key">{{ value }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="row in rows" :key="row.id">
          <td>{{ row.id }}</td>
          <td>{{ row.name }}</td>
          <td>{{ row.phone }}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <!-- Don't forget to include Vue from CDN! -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app', //Tells Vue to render in HTML element with id "app"
      data() {
        return {
          column: {
        id: "ID",
        name: "Full Name",
        phone: "Phone",
      },
      rows: [
        { id: 1, name: "Test Name 1", phone: "587-917-1241" },
        { id: 2, name: "Test Name 2", phone: "250-682-3553" },
        { id: 3, name: "Test Name 3", phone: "707-848-0782" },
      ],
        }
      }
    });
  </script>
</html>

You are almost there, Just have a look into this List Rendering documentation.

Live Demo :

new Vue({
  el: "#app",
  data: {
    column: {
      id: "ID",
      name: "Full Name",
      phone: "Phone",
    },
    rows: [
      { id: 1, name: "Test Name 1", phone: "587-917-1241" },
      { id: 2, name: "Test Name 2", phone: "250-682-3553" },
      { id: 3, name: "Test Name 3", phone: "707-848-0782" }
    ],
  },
});

table {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  width: 500px;
  border-collapse: collapse;
  border: 2px solid #444777;
  margin: 10px;
}

table th {
  background: #444777;
  color: #fff;
  padding: 5px;
  min-width: 30px;
}

table td {
  padding: 5px;
  border-right: 2px solid #444777;
}

table tbody tr:nth-child(2n) {
  background: #d4d8f9;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id="app">
  <table>
    <thead>
      <tr>
        <th v-for="(header, index) in column" :key="index">{{ header }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in rows" :key="row.id">
        <td>{{ row.id }}</td>
        <td>{{ row.name }}</td>
        <td>{{ row.phone }}</td>
      </tr>
    </tbody>
  </table>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.