A dashboard on my interface showcases various cards containing data retrieved from the backend API and stored in an array called notes[]. When I click on a specific card, a pop-up named updatecard should appear based on its id. However, I am facing issues connecting the updateNote.vue component to the backend API (PUT-method). The updateNote functionality relies on the id of the clicked card, but I am unsure how to pass this particular id into the updateNote URL. Any assistance in resolving this problem would be greatly appreciated. [Screenshot of incorrect hitting API URL]

DisplayNotes.vue

<template>
<div class="carddisplay-section">
    <div v-for="note in notes" :key="note.id" id="blur" class="container note">
        <div @click="toggle(note.id)" class="card-content">
            <h5>{{note.title}}</h5>
            <p>{{note.body}}</p>
        </div>
        <div class="import-icons">
            <icons class="imported-icons note-icons" />
            <button v-if="flag" class="card-button" type="button" @click="handlesubmit();Togglebtn();">Close</button>
        </div>
    </div>
    <div id="popup">
        <UpdateNotes :cardId="clickedCard"/>
    </div>
</div>
</template>

<script>
import service from '../service/User'
import icons from './icons'
import UpdateNotes from './UpdateNotes.vue'
export default {
    name: 'DisplayNotes',
    components: {
        icons, UpdateNotes
    },
    data() {
        return {
            flag: true,
            notes: [{
                id: 1,
                title: 'Fundoo',
                body: 'unlimited notes..'
            }, ],
           clickedCard:'',
        }
    },
    methods: {
        Togglebtn() {
            this.flag = !this.flag;
        },
        async handlesubmit() {
            service.userDisplayNotes().then(response => {
                this.notes.push(...response.data);
            })
        },
        toggle(id){
            var blur=document.getElementById('blur');
            blur.classList.toggle('active');
             this.clickedCard = id;

            var popup=document.getElementById('popup');
            popup.classList.toggle('active');

        },
        // myIndex(){
        //     document.getElementById('blur').innerHTML=this.notes.findIndex();
        // }

    }
}
</script>

<style lang="scss">
@import "@/styles/DisplayNotes.scss";
</style>

UpdateNotes.vue

<template>
 <div class="update">
        <form class="update-note" @submit.prevent="handlesubmit" autocomplete="off">
            <input name="title"  v-model="title" placeholder="Title" />
            <textarea name="content" v-model="body" style="resize: none" placeholder="Take a note..." rows="3"></textarea>
            <div class="btm-icons">
                <icons />
                <button id="btn-section"  type="submit" @click="handlesubmit">Close</button>
            </div>
        </form>
    </div>
</template>
<script>
import icons from './icons.vue'
import service from '../service/User'
export default{
    components:{icons},
    props: ['cardId'],
     data() {
        return {
            title: '',
            body: ''
        }
    },
    methods:{
     async handlesubmit(){
       let userData={
id:this.cardId,
title:this.title,
body:this.body
       }
        service.userUpdateNotes(userData).then(response => {
         localStorage.getItem('token', response.data.token);  
               alert("Note updated successfully");
               return response;
            })
     }
    }
}

</script>
<style scoped>
.update {
  padding-top: 0%;
  
}

.update-note {
  position: relative;
  width: 550px;
  max-width: 100%;
  margin: 152px auto;
  margin-right: 80%;
  background: rgb(255, 255, 255);
  padding: 15px;
  border-radius: 5px;
  box-shadow: 0 1px 5px #ccc;
}
.update-note input {
  width: 100%;
  max-width: 100%;
  border: none;
  padding: 4px;
  outline: none;
  font-size: 1.2em;
}
textarea {
  width: 100%;
  max-width: 100%;
  border: none;
  padding: 4px;
  outline: none;
  font-size: 1.2em;
}
button {
  border: none;
  background: transparent;
  font-weight: 500;
  float: right;
  margin-top: -5%;
  cursor: pointer;
}

</style>

[contains API call methods] axios.js

// npm install axios --save
//axios.defaults.baseURL="http://localhost:8000/api"

import axios from 'axios'

axios.defaults.baseURL=process.env.VUE_APP_AXIOS_URL
axios.defaults.headers.common['Authorization'] = 'Bearer' + localStorage.getItem('token');

export default class AxiosService{
   postData(url, data){
       return axios.post(url, data).then(response =>{
           return response;
       }).catch(error=>{
           return error;
       })
   }
   getData(url){
        return axios.get(url).then(response=>{  
            localStorage.getItem('token', response.data.token);  
            return response;
       }).catch(error=>{
            return error;
       })
   }
   updateData(url, data){
       return axios.put(url, data).then(response=>{
           return response;
       })
   }
}

[includes backend API URLs and uses methods from axios.js] user.js

// import axios from 'axios';
import AxiosService from '../service/axios';
const axios = new AxiosService()

export default{
    userRegister(data){
        return axios.postData("/register", data);
    },
    userLogin(data){
        return axios.postData("/login", data);
    },
    userForgot(data){
        return axios.postData("/auth/sendPasswordResetLink", data);
    },
    userReset(data){
        return axios.postData("/auth/resetPassword", data);
    },
    userCreateNote(data){
        return axios.postData("/createNote", data);
    },
    userDisplayNotes(){
        return axios.getData("/displayNotes");
    },
    userUpdateNotes(data){
        //actual URL is http://localhost:8000/api/updateNote/1 (where id= id of my card)
        return axios.updateData(`/updateNote/${id}`, data);
    }
}