vue.js中如何将一个组件的卡数据绑定到另一个组件卡？

Question

i have two components one is Displaying cards which is responsible to show the data into a card which comes from backend(DisplayNotes.vue) and another one is updating the existing data card by opening popup(updateNotes.vue), if the user clicks on any card it opens one popup which is responsible for editing data but in my case if the user clicks on any card it should opens the popup-card(UpdateNotes.vue) along with the existing data,Here my question is How to get data from the card into a popup card [ Here i am clicking 4th card,when ever i click on the forth card the content should bind to the pop-up card ] 1 ,please help me to get the data into a popup card

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>

Answer 1

As you are passing the id of the card in the popup, similarly pass the data of the currently clicked card in the popup.

UpdateNotes.vue

<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', 'cardContent'],
    data() {
        return {
            title: '',
            body: '',
            flag: false,
        }
    },
    created () {
        this.title = this.cardContent.title;
        this.body = this.cardContent.body;
    },
    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>

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" :cardContent="cardContent"/>
    </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: '',
           cardContent: {}
        }
    },
    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;

            this.cardContent = this.notes.filter((note) => note.id === id);

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

        },
    }
}
</script>

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