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

Posted

技术标签:

【中文标题】如何在 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 从未设置过值

以上是关于如何在 vue.js 中将卡片数据从一个组件绑定到另一个组件卡片?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Vue.js 中将数据从 Test1 组件传递到 Test2 组件?

如何在 Vue Js 中将数据值从一个组件更改为另一个组件?

在vue js中将响应数据从组件发布到根

如何在 Vue JS 中将更新的值从父组件发送到子组件?

vue绑定父子组件

如何将点击卡片的 id 和卡片内容传递给 vue.js 中的另一个组件?