Vue get id from table row

Question

How will I get selected item in this table row. I want When I click on the row its gives me the cowId then I can use it . is there a way i can do this in a very simple way without much modification. then i can send thecowwid to my api via axios for deleting

    <div id="ArtificialInsemination" class="container">
        <button v-on:click="viewRecords">View Record</button>
        <table class="table table-striped">
            <thead>
            <tr>
                <th>Cow Id</th>
                <th>Bull Name</th>
                <th>Semen Origin</th>
                <th>Insemination Time</th>
                <th>Pd Delivery Date</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for ="artificialInseminationRecord in artificialInseminationRecords">
                <td>{{ artificialInseminationRecord.cowId }}</td>
                <td>{{ artificialInseminationRecord.bullUsedName }}</td>
                <td>{{ artificialInseminationRecord.semenOrigin }}</td>
                <td>{{ artificialInseminationRecord.inseminationTime }}</td>
                <td>{{ artificialInseminationRecord.pdStatusDate }}</td>
                <td><button v-on:click="DeleteArtificialInseminationRecords" >Delete</button></td>
            </tr>
            </tbody>
        </table>
    </div>

this VUE to GET COW ID WHEN a row in a table clicked

<script>
    //class initialization

    var ArtificialInsemination = new Vue({
        el:'#ArtificialInsemination',
        data: {
            url:'http://localhost/dairyfarm/index.php',
            artificialInseminationRecords: [],
            cowId: ''

        },
        //invoke methods
        methods: {
          viewRecords:function () {
              var data = new FormData()
              data.append('function','viewRecords')
              axios.post(this.url,data)
                  .then( function (response ) {
                  this.artificialInseminationRecords = response.data.data
              }.bind(this)).catch(function (error) {

              })

            }, saveInseminationRecords:function () {
              var data = new FormData()
              data.append('function','saveInseminationRecords')
              axios.post(this.url,data)
                  .then( function (response ) {
                  this.artificialInseminationRecords = response.data.data
              }.bind(this)).catch(function (error) {

              })

            }, DeleteArtificialInseminationRecords:function () {
                this.cowId = 'GET COW ID HERE'
              var data = new FormData()
              data.append('function','DeleteArtificialInseminationRecords')
                data.append('cowId',this.cowId)
              axios.post(this.url,data)
                  .then( function (response ) {
              }.bind(this)).catch(function (error) {

              })

            },
            create: function(){
              this.viewRecords()
            }.bind(this),
        }
    })

</script>

Unknown Unknown · Accepted Answer · 2017-10-28T15:01:51

Complete example. Hope it helps.

const store = new Vuex.Store({
  state: {
    users: null
  },
  mutations: {
    updateUsers (state, payload) {
      state.users = payload
    }
  },
  actions: {
    async loadUsers ({commit}, payload) {
      var response = await axios.get(payload.src)
      commit('updateUsers', response.data )
    }
  }
})

Vue.component('user-list', {
  template: '#user-list',
  props: ['src'],
  methods: {
    removeUser (id) {
      alert('You are deleting user id: ' + id)
      // axios.delete('https://your.rest.api/users/' + id)
    }
  },
  created () {
    this.$store.dispatch('loadUsers', {src: this.src})
  }
})

new Vue({
  el: '#app',
  store
})

table {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  border: 1px solid black;
  padding: 3px;
}
td:last-child {
  text-align: center;
}

<div id="app">
  <user-list src="https://jsonplaceholder.typicode.com/users">
  </user-list>
</div>

<template id="user-list">
  <table>
    <thead>
      <tr>
        <th>ID</th>
        <th>Nick</th>
        <th>Full name</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tr v-for="user in $store.state.users" :key="user.id">
      <td>{{ user.id }}</td>
      <td>{{ user.username }}</td>
      <td>{{ user.name }}</td>
      <td><button @click="removeUser(user.id)">X</button></td>
    <tr>
  </table>
</template>

<script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/axios.min.js"></script>

Vue get id from table row

1 Answers