将方法应用于v-for数组Vue 3 JS中的项

a7qyws3x  于 2023-11-21  发布在  Vue.js
关注(0)|答案(1)|浏览(191)

它必须非常简单,但我不知道如何在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,但它不工作。
请问我做错了什么?如何将请求值添加到表单中?
谢谢你

lkaoscv7

lkaoscv71#

除非你将请求作为参数传递,否则单个请求不会被发送到方法。方法还应该定义一个参数来接收该值。

@click="sendApproval(request)"

个字符

相关问题