[Vuejs]-Vue.js method calls on string in tabledata

by

0👍

✅

Suggestions :

  • As you are using Vue.js then no need to use Vanilla JS to create a table. You can do it dynamically in the template itself.
  • Use @click/v-on:click directive of Vue to trigger the click event instead of JS onClick.

Live Demo :

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    companies: [{
      id: 1,
      name: 'Alpha',
      created_at: 'test'
    }, {
      id: 2,
      name: 'Beta',
      created_at: 'test'
    }, {
      id: 3,
      name: 'Gamma',
      created_at: 'test'
    }]
  },
  methods: {
    updateSomeCompanies(id) {
        console.log(id);
    }
  }
})
table, th, td {
  border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr>
      <th></th>
      <th>ID</th>
      <th>Name</th>
      <th>Created At</th>
    </tr>
    <tr v-for="company in companies" :key="company.id">
      <td id="checkUpdateBox">
        <input v-on:click="updateSomeCompanies(company.id)" type="checkbox"/>
      </td>
      <td>{{ company.id }}</td>
      <td>{{ company.name }}</td>
      <td>{{ company.created_at }}</td>
    </tr>
  </table>
</div>

Leave a comment