如何从在 v-for 循环内单击的对象中获取值？答案

【问题标题】：How can I get the values from an object that's clicked inside a v-for loop?如何从在 v-for 循环内单击的对象中获取值？
【发布时间】：2021-02-07 09:19:16
【问题描述】：

当用户点击下面表单中的一个项目时，我想调用@click.prevent="Addcart()"

当Addcart 被调用时，在该方法中，我想从单击的项目（即result）中获取详细信息并在ajax 调用中使用这些值。

目前，在Addcart 内部，当我运行console.log(this.product_id); 时，我在控制台中得到undefined。

            <div class="col-lg-4 col-4 mb-5"
            v-for="(result, index) in results"
            :key="result.id">
            <form method="post">
                <div class="card" style="width: 18rem;">
                    <input type="text" v-model="result.product_id" />
                    <input type="text" v-model="result.product_price" />
                    <input type="text" v-model="result.product_color" />
                    <input type="text" v-model="result.product_size" />
                    <input type="text" v-model="cart_quantity" />
                    <button @click.prevent="Addcart()" class="btn btn-danger">Add to cart</button>
              </div>
            </form>

这里是javascript代码

 import axios from "axios";

 export default {
    name: "products",
    components: {},
    data() {
      return {
        cart_quantity: 1,
        results: [],

      };
    },
    created() {
      this.getProducts();
    },
    methods: {
      getProducts() {
        axios
          .get("http://localhost/vue/src/Api/api?action=getproducts")
          .then((res) => {
            console.log(res.data.user_Data);
            this.results = res.data.user_Data;
          })
          .catch((err) => {
            console.log(err);
          });
      },
      Addcart() {
        let data = new FormData();
        console.log(this.product_id);
        data.append("product_id", this.product_id);
        data.append("cart_price", this.product_price);
        data.append("product_color", this.product_color);
        data.append("product_size", this.product_size);
        data.append("product_qty", this.cart_quantity);
        axios.post('http://localhost/vue/src/Api/api?action=addcart', data).then((res) => {
          if (res.data.error) {
            alert("Error");
          } else {
            alert(res.data.message);
          }
        }).catch((err) => {
          console.log(err);
        })


      },
    },
  };

【问题讨论】：

请显示console.log(res);的输出
@WesleySmith 这个控制台显示了发生错误时我在 php 脚本中定义的 else 语句。
this.results 是否设置正确，问题出在Addcart()？
如果 console.log(res); 显示来自您的 php 脚本的错误消息，您需要向我们展示 php 代码，因为问题似乎存在
下面的答案将变量 result 发送到 addCart 函数，您可以使用它将结果内部的数据发送到 axios 函数

标签： javascript php jquery vue.js axios

【解决方案1】：

this 在addCart 方法的上下文中指向 vue 组件，不是您添加的项目，因为代码似乎期望。要使用被单击的项目，您需要将表单中的循环中的项目作为参数传递给方法。

将您的表单更改为：

<button @click.prevent="addCart(result)" class="btn btn-danger">Add to cart</button>

然后，将您的 addCart 方法更改为：

  addCart(item) {
    console.log(item);
    data.append("product_id", item.product_id);
    // ...
  },

注意，出于个人喜好，我将addCart 以小写字母开头，并与您的getProducts 保持一致。

【讨论】：