vue3怎么只传当前行的数据到后端
在 Vue3 中,你可以使用 axios 或者 fetch 等 HTTP 库来向后端发送请求,并且通过传递当前行的数据作为请求参数来只传当前行的数据到后端。
举个例子,假设你有一个表格,每一行都有一个编辑按钮,点击编辑按钮后需要将当前行的数据发送到后端进行保存。你可以在点击编辑按钮时触发一个方法,将当前行的数据作为参数传递给后端:
<template>
<div>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="item in data" :key="item.id">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>
<button @click="edit(item)">编辑</button>
</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
data: [
{ id: 1, name: '张三', age: 20 },
{ id: 2, name: '李四', age: 25 },
{ id: 3, name: '王五', age: 30 }
]
}
},
methods: {
edit (item) {
axios.post('/api/saveData', item)
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
}
}
}
</script>
在上面的代码中,我们在点击编辑按钮时调用了 edit 方法,并将当前行的数据 item 作为参数传递给了后端的 /api/saveData 接口。后端接口可以通过获取请求参数来获取当前行的数据,然后进行保存操作。
原文地址: https://www.cveoy.top/t/topic/Y9U 著作权归作者所有。请勿转载和采集!