如何将点击的卡片按钮 id 传递给 vue.js 中的后端 URL 路径？

Posted 2023-02-16

【中文标题】如何将点击的卡片按钮 id 传递给 vue.js 中的后端 URL 路径？

【英文标题】：How to pass clicked card button id to the backend URL path in vue.js?

【发布时间】：2021-09-20 18:39:42

【问题描述】：

我开发了一个负责显示书籍的页面，并且响应来自后端，现在我想通过单击添加到袋子按钮来更新我的书卡，因为我编写了一个 handleCart() 方法来更新它基于更新关于书籍 ID，如何将特定 clickedCard 书籍 ID 传递给 url 路径，请帮我解决这个问题。

DisplayBooks.vue

<template>
<div class="carddisplay-section">
    <div v-for="book in books" :key="book.id" class="card book">
        <div class="image-section">
            <div class="image-container">
                <img  v-bind:src="book.file" />
            </div>
        </div>
        <div class="title-section">
            book.name
        </div>
        <div class="author-section">
            by book.author
        </div>
        <div class="price-section">
            Rs. book.price<label class="default">(2000)</label>
            <button v-if="flag" class="btn-grp" type="submit" @click="handlesubmit();Togglebtn();">close</button>
        </div>
        <div class="buttons">
            <div class="button-groups">
                <button type="submit"  @click="handleCart();"  class="AddBag">Add to Bag</button>
                <!-- v-if="state==true" -->
                <button  class="wishlist">wishlist</button>
            </div>
           
            <div class="AddedBag">
                <button class="big-btn">Added to Bag</button>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import service from '../service/User'
export default 
    data() 
        return 
            isActive:true,
            result: 0,
            authorPrefix: 'by',
            pricePrefix: 'Rs.',
            defaultStrikePrice: '(2000)',
            buttonValue: 'close',
            flag: true,
            state: true,
            clickedCard: '',
            books: [
                id: 0,
                file: 'https://images-na.ssl-images-amazon.com/images/I/41MdP5Tn0wL._SX258_BO1,204,203,200_.jpg',
                name: 'Dont Make me think',
                author: 'Sai',
                price: '1500'
            , ]
        
    ,
    methods: 
        toggleClass: function(event)
            this.isActive = !this.isActive;
            return event;
        ,
         toggle(id) 
            this.clickedCard = id;
           
          console.log(this.clickedCard);
          
        ,
        flip() 
            this.state = !this.state;
        ,
        Togglebtn() 
            this.flag = !this.flag;
        ,
        handlesubmit() 
            service.userDisplayBooks().then(response =>   
                this.books.push(...response.data);  
            )
        ,
        handleCart()
            let userData=
                id:this.clickedCard,
            
            service.userUpdateCart(userData).then(response=>
                alert("item added to cart");
                return response;
            )
        
    

</script>

User.js

  userUpdateCart(data)
        return axios.updateData(`/addtocart/$data.id`,data);
    ,

axios.js

 updateData(url,data)
       return axios.put(url,data).then(response=>
        localStorage.getItem('token', response.data.token); 
           return response;
       )
    

它没有使用图书 ID

【参考方案1】：

将图书 ID 作为参数传递给 handleCart 方法。

@click="handleCart(book.id)"

handleCart(bookId)
let userData=
    id: bookId,

service.userUpdateCart(userData).then(response=>
    alert("item added to cart");
    return response;
    )

toggle 方法也永远不会被调用。