Vue从表格行中获取ID
问题描述:
如何在此表格行中获取选定的项目。我想当我点击行时,它给了我,然后我可以使用它。有没有一种方法,我可以做一个非常简单的方法,没有太多的修改。那么我可以通过爱可信发送thecowwid我的API进行删除Vue从表格行中获取ID
<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>
答
完整的示例。希望能帮助到你。
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>
@LaureenToroitch thanx的接受。 – WaldemarIce