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

Posted 2023-02-22

【中文标题】如何从在 v-for 循环内单击的对象中获取值？

【英文标题】：How can I get the values from an object that's clicked inside a v-for loop?

【发布时间】：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 函数

【参考方案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 保持一致。