它必须非常简单,但我不知道如何在Vue 3中访问v-for数组中的项的值。
<template>
<div>
<table class="table-auto w-full max-w-screen mt-4">
<thead>
<tr>
<th>Name</th>
<th>Surname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<template v-for="request in pending">
<tr>
<td>{{ request.name }}</td>
<td>{{ request.surname }}</td>
<td>{{ request.email }}</td>
<td>
<button
class="text-white bg-green-800 rounded-md px-2 py-2"
@click="sendApproval"
>Approve</button
>
</td>
<td>
<button class="text-white bg-red-800 rounded-md px-2 py-2">Reject</button>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</template>
<script>
export default {
data() {
return {
pending: [],
form: {
name: '',
surname: '',
email: '',
},
index: '',
};
},
mounted() {
this.getPending();
},
methods: {
getPending() {
axios
.get('/api/pending/')
.then((response) => {
console.log('data', response.data);
this.pending = response.data;
})
.catch((error) => {
console.log('error', error);
});
},
sendApproval() {
this.form.name = request.name;
console.log(this.form.name);
},
},
};
</script>
字符串
所以基本上我从一个API(使用axios)得到一个响应,然后我将收到的每个项目(在我的代码中名为“request”)添加到一个名为“pending”的列表中。
使用v-for,我在一个表中显示来自挂起列表的每个请求的所有值。
然后,我希望能够单击“选项”来调用方法sendApproval()
,该方法将获取请求值并将其添加到表单中,稍后将使用axios(POST方法)发送回表单。
问题是我无法使用v-for访问每个请求值。
我试过使用v-bind,但它不工作。
请问我做错了什么?如何将请求值添加到表单中?
谢谢你
1条答案
按热度按时间lkaoscv71#
除非你将请求作为参数传递,否则单个请求不会被发送到方法。方法还应该定义一个参数来接收该值。
个字符