My application consists of two components: DisplayNotes.vue, which displays data in card format retrieved from the backend, and UpdateNotes.vue, which allows users to update existing data by opening a popup. The issue I'm facing is that when a user clicks on a card, the popup should open with the corresponding data from that card. How can I achieve this? Clicking on the 4th card should populate the popup-card with the content, could you please assist me in solving this problem?
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');
},
}
}
</script>
<style lang="scss">
@import "@/styles/DisplayNotes.scss";
</style>
UpdateNotes.vue[popup]
<template>
<div v-if="flag==false" class="update">
<form class="update-note" @submit.prevent 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();flip();">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: '',
flag: false,
}
},
methods: {
flip() {
this.flag = !this.flag;
},
async handlesubmit() {
let userData = {
id: this.cardId,
title: this.title,
body: this.body
}
service.userUpdateNotes(userData).then(response => {
alert("Note updated successfully");
return response;
})
}
}
}
</script>
<style lang="scss" scoped>
@import "@/styles/UpdateNotes.scss";
</style>