Vue从表格行中获取ID

Question

我将如何在此表格行中获得选定的项目。我想当我点击它给我的行时，我可以使用它。有没有一种方法我可以以非常简单的方式做到这一点而无需太多修改。然后我可以通过 axios 将 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 将获取 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>