[英]How to bind card data from one component to another component card in vue.js?
我有两个组件,一个是显示卡,负责将数据显示到来自后端(DisplayNotes.vue)的卡中,另一个是通过打开弹出窗口(updateNotes.vue)更新现有数据卡,如果用户单击任何卡片都会打开一个弹出窗口,负责编辑数据,但在我的情况下,如果用户单击任何卡片,它应该打开弹出卡片(UpdateNotes.vue)以及现有数据,我的问题是如何从中获取数据卡片变成弹出式卡片 [这里我点击第四张卡片,当我点击第四张卡片时,内容应该绑定到弹出式卡片] 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>
当您在弹出窗口中传递卡片的 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.