如何在 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 组件?