title: How to pass clicked card button id to the backend URL path in vue.js?
body: <p>I developed one page which is responsible for Displaying Books and the response is coming from backend , now i want to update my book card by clicking on ADD TO BAG button for that i write one handleCart() method for updating it updates based on book id , How to pass particular clickedCard Book id to the url path ,please help me to fix this .</p>
  <p><code>DisplayBooks.vue</code></p>
  <pre><code>&lt;template&gt;
  &lt;div class=&quot;carddisplay-section&quot;&gt;
      &lt;div v-for=&quot;book in books&quot; :key=&quot;book.id&quot; class=&quot;card book&quot;&gt;
          &lt;div class=&quot;image-section&quot;&gt;
              &lt;div class=&quot;image-container&quot;&gt;
                  &lt;img  v-bind:src=&quot;book.file&quot; /&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;title-section&quot;&gt;
              {{book.name}}
          &lt;/div&gt;
          &lt;div class=&quot;author-section&quot;&gt;
              by {{book.author}}
          &lt;/div&gt;
          &lt;div class=&quot;price-section&quot;&gt;
              Rs. {{book.price}}&lt;label class=&quot;default&quot;&gt;(2000)&lt;/label&gt;
              &lt;button v-if=&quot;flag&quot; class=&quot;btn-grp&quot; type=&quot;submit&quot; @click=&quot;handlesubmit();Togglebtn();&quot;&gt;close&lt;/button&gt;
          &lt;/div&gt;
          &lt;div class=&quot;buttons&quot;&gt;
              &lt;div class=&quot;button-groups&quot;&gt;
                  &lt;button type=&quot;submit&quot;  @click=&quot;handleCart();&quot;  class=&quot;AddBag&quot;&gt;Add to Bag&lt;/button&gt;
                  &lt;!-- v-if=&quot;state==true&quot; --&gt;
                  &lt;button  class=&quot;wishlist&quot;&gt;wishlist&lt;/button&gt;
              &lt;/div&gt;
             
              &lt;div class=&quot;AddedBag&quot;&gt;
                  &lt;button class=&quot;big-btn&quot;&gt;Added to Bag&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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 =&gt; {  
                  this.books.push(...response.data);  
              })
          },
          handleCart(){
              let userData={
                  id:this.clickedCard,
              }
              service.userUpdateCart(userData).then(response=&gt;{
                  alert(&quot;item added to cart&quot;);
                  return response;
              })
          }
      }
  }
  &lt;/script&gt;
  
  </code></pre>
  <p><code>User.js</code></p>
  <pre><code>  userUpdateCart(data){
          return axios.updateData(`/addtocart/${data.id}`,data);
      },
  </code></pre>
  <p><code>axios.js</code></p>
  <pre><code> updateData(url,data){
         return axios.put(url,data).then(response=&gt;{
          localStorage.getItem('token', response.data.token); 
             return response;
         })
      }
  </code></pre>
  <p>it's not taking book id
  <a href="https://i.stack.imgur.com/wZdyL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wZdyL.png" alt="My URL" /></a></p>