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

Posted 2023-02-22

【中文标题】如何在 vue.js 中将卡片数据从一个组件绑定到另一个组件卡片？

【英文标题】：How to bind card data from one component to another component card in vue.js?

【发布时间】：2021-09-04 11:37:35

【问题描述】：

我有两个组件，一个是显示卡，它负责将数据显示到来自后端（DisplayNotes.vue）的卡中，另一个是通过打开弹出窗口（updateNotes.vue）来更新现有数据卡，如果用户单击任何卡片会打开一个弹出窗口，该弹出窗口负责编辑数据，但在我的情况下，如果用户单击任何卡片，它应该打开弹出卡片（UpdateNotes.vue）以及现有数据，我的问题是如何从卡中获取数据到弹出卡中[Here i am clicking 4th card ,when ever i click on the forth card the content should bind to the pop-up card]1，请帮我将数据到弹出卡中

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[弹出]

<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>

【参考方案1】：

当您在弹出窗口中传递卡片的 id 时，同样在弹出窗口中传递当前点击卡片的数据。

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>

【讨论】：

你好@Yash Maheshwari，数据没有以 UpdateNotes.vue 中的 placeholder="Title" 和 "Take a Note" 的形式绑定

如果我点击任何一张卡片，它会打开一个弹出窗口（updateNotes.vue），在我的情况下，我需要包含卡片的内容，数据将出现在弹出卡片中，@Yash Maheshwari跨度>

你能通过console.log(this.cardContent)检查你在created()钩子中得到了什么吗？

你好@Yash Maheshwari，我正在控制台上获取点击卡片的数据，我正在切换（id）内的 DisplayNotes.vue 中编写 console.log()

TypeError: Cannot read property 'title' of undefined at VueComponent.created 那是因为cardContent 从未设置过值