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

【问题标题】：How to pass clicked card button id to the backend URL path in vue.js?如何将点击的卡片按钮 id 传递给 vue.js 中的后端 URL 路径？
【发布时间】：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

【问题讨论】：

标签： vue.js vuejs2 axios

【解决方案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 方法也永远不会被调用。

【讨论】：