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

Posted 2023-02-16

【中文标题】如何将点击卡片的 id 和卡片内容传递给 vue.js 中的另一个组件？

【英文标题】：How to pass id and card content of a clicked card to the another component in vue.js?

【发布时间】：2021-09-05 17:19:06

【问题描述】：

我有三个组件 icons.vue 也包含图标和下拉菜单，这个组件是 DisplayNotes.vue 的子组件，现在当用户点击任何卡片 DeleteNote-option（出现在 icons.vue 内部）时，该卡片id和内容应该传递给另一个组件DeleteNote.vue，如何将特定点击的卡片[visit my output img]1数据传递给DeleteNote.vue组件，请帮我解决这个问题

icons.vue

<template>
<div class="footer">
    <i class="fas fa-bell"></i>
    <i class="fas fa-user"></i>
    <i class="fas fa-palette"></i>
    <i clss="fas fa-image"></i>
    <i class="fas fa-archive"></i>
    <div class="dropdown">
        <i @click="myFunction();" class="fas fa-ellipsis-v"></i>
        <div ref="myDropdown" class="dropdown-content">
            <a href="">DeleteNote</a>
            <a href="">ChangeLabel</a>
            <a href="">Add drawing</a>
            <a href="">Make a Copy</a>
            <a href="">Show Checkboxes</a>
        </div>
    </div>
</div>
</template>

<script>
export default 
    methods: 
        myFunction(event) 
            this.$refs.myDropdown.classList.toggle("show");
            return event;
            // document.getElementById("myDropdown").classList.toggle("show");
        
    

</script>

<style scoped>
.footer i 
    opacity: 0.9;
    position: relative;

.footer .fa-bell 
    margin-top: 5px;
    margin-left: 10px;

.footer .fa-user 
    margin-top: 5px;
    margin-left: 40px;

.footer .fa-palette 
    margin-top: 5px;
    margin-left: 40px;

.footer .fa-image 
    margin-top: 5px;
    margin-left: 40px;

.footer .fa-archive 
    margin-top: 5px;
    margin-left: 40px;

.footer .fa-ellipsis-v 
    margin-top: 5px;
    margin-left: 40px;
    cursor: pointer;

.dropbtn 
    background-color: white;
    color: white;
    padding: 16px;
    font-size: 14px;
    font-family: 'Times New Roman', Times, serif;
    border: none;
    cursor: pointer;

.dropbtn:hover,
.dropbtn:focus 
    background-color: #2980B9;

.dropdown 

    position: relative;
    display: inline-block;

.dropdown-content 
    margin-left: 40%;

    display: none;
    position: absolute;
    background: white;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;

.dropdown-content a 
    color: black;
    padding: 8px 17px;
    text-decoration: none;
    display: block;

.dropdown-content a:hover 
    background-color: rgb(241, 234, 234)

.show 
    display: block;

</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.card.content = 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>

DeleteNote.vue[我想传递点击的卡片ID（在icons.vue的下拉菜单中点击DeleteNote）]

<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;
            ).catch(error=>
                alert("Error ");
                return error;
            )
        ,
    

</script>

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

router.js[deleteNote.vue 的路由路径]

 
        path:'/trash',
        component:DeleteNote
        ,

【参考方案1】：

您需要在路线中激活道具

   path: '/trash',
   component: DeleteNote,
   name: 'DeleteNote',
   props: true
 ,

将道具传递给图标组件。从图标组件中，使用 router-link 将 cardId 和 cardContent 传递给 DeleteNote 组件。

【讨论】：

你好@wanje，如果我使用了这个道具，谢谢你的回复：真的它不起作用，因为我没有在icons.vue组件中传递任何道具

道具要传递到哪里

Hai @wanje，当用户点击图标部分中的DeleteNote时，我想获取ID，它将获取卡片ID，并且该ID应该传递给DeleteNote.vue组件

模块错误（来自 ./node_modules/eslint-loader/index.js）：C:\Users\VICKY\Desktop\8\vue-fundoo\src\components\icons.vue 24:17错误“cardId”属性应该是构造函数 vue/require-prop-type-constructor 25:22 错误“cardContent”属性应该是构造函数 vue/require-prop-type-constructor ✖ 2 个问题（2 个错误，0 个警告)

为了放置 router.js 我们可以作为 props 传递到 DeleteNote.vue 组件中