Vue從表格行中獲取ID

Question

如何在此表格行中獲取選定的項目。我想當我點擊行時，它給了我，然後我可以使用它。有沒有一種方法，我可以做一個非常簡單的方法，沒有太多的修改。那麼我可以通過愛可信發送thecowwid我的API進行刪除

<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> 

這VUE爲GET COW ID當在一個表中的一行點擊

<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> 

Answer 1

完整的示例。希望能幫助到你。

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/vue@2.5.2/dist/vue.min.js"></script> 
 
<script src="https://unpkg.com/vuex@3.0.0/dist/vuex.min.js"></script> 
 
<script src="https://unpkg.com/axios@0.17.0/dist/axios.min.js"></script>