vue.js和事件中的数据绑定问题

Question

我正在开发一个基本的记事本应用程序，目前功能很简单，创建一个笔记，完成后单击以前创建的笔记列表中的笔记以查看其详细信息。我无法点击注释并查看详细信息，而是在记事本模板的底部看到组件ShowNote.vue的详细信息，为了查看详细信息我必须制作v-if="noteIsOpen to false"；。我也无法在ShowNote.vue文件中看到来自数据绑定的数据。此外，当您单击加号按钮时，注释中的详细信息会填充该按钮在单击时生成的页面。我将在下面粘贴我的代码的屏幕截图。请帮我弄清楚。我试着修复道具，当我修复时，我终于看到了纸条的细节。

App.vue
<template>
<div class="body">
<div class="notepad-container h-75 w-75">
<header class="header d-flex justify-content-center align-items-center">
<h4>Light Notepad v1</h4>
</header>
<section class="notepad-content" v-if="editorIsOpen === false">
<note-list
v-for="note in notes"
:key="note.id"
:note="note"
></note-list>
<add-note-button @open-editor="openNewEditor"></add-note-button>
</section>
<section class="notepad-editor" v-if="editorIsOpen === true">
<save-button></save-button>
</section>
<section class="notepad-content" v-if="noteIsOpen === true">
<show-note 
:note="notes"
@open-note="readNote"
/>
</section>
<section class="notepad-content" v-if="noteIsOpen === false">
<show-note 
:note="notes"
@open-note="openNote"
/>
</section>

</div>
</div>
</template>
<script>
import AddNoteButton from "./components/AddNoteButton.vue";
import NoteList from "./components/NoteList.vue";
import SaveButton from "./components/SaveButton.vue";
import ShowNote from "./components/ShowNote.vue";
export default {
components: {
NoteList,
AddNoteButton,
SaveButton,
ShowNote,
},
data() {
return {
editorIsOpen: false,
noteIsOpen: false,
notes: [
{
id: 1,
title: "1st Note",
body: "This is a note",
date: "10/17/20",
},
{
id: 2,
title: "2nd Note",
body: "This is a note",
date: "11/17/20",
},
],
};
},
methods: {
openNewEditor() {
this.editorIsOpen = !this.editorIsOpen;
},
readNote() {
this.noteIsOpen = !this.noteIsOpen;
},
},
};
</script>

AddNoteButton.vue

<template>
<div class="add-note-container" @click="openEditor">
<b-icon-plus-circle></b-icon-plus-circle>
</div>
</template>
<script>
import {BIconPlusCircle} from 'bootstrap-vue';
export default {
emits: ['open-editor'],
components: {
BIconPlusCircle
},
methods: {
openEditor() {
console.log('hello');
this.$emit('open-editor');
}
}
}
</script>

NoteList.vue

<template>
<div>
<b-list-group>
<b-list-group-item button @click="openNote()" 
>{{ note.title }} - {{ note.date }}</b-list-group-item
>
</b-list-group>
</div>
</template>
<script>
export default {
emits: ['open-note'],
props: {
note: {
required: true,
},
},
methods: {
openNote() {
this.$emit('open-note');
console.log("clicked from NoteList");
},
},
};
</script>

显示备注.vue

<template>
<div>
note details: 
Note ID: {{ note.id }}, Date: {{ note.date }},
Title: {{ note.title }}, Body: {{ note.body }}
</div>
</template>
<script>
export default {
name: 'showNote',
props: {
note: {
required: true,
}
},

};
</script>

Answer 1

在您的NoteList.vue中，您正在发出事件"打开音符"；。但是在名为App.vue的父组件中永远不会捕获此事件。您必须绑定此事件，以便在单击笔记条目时收到通知。类似@open-note="openNote"的东西。

Answer 2

我想好了如何在点击笔记时显示详细信息，现在我在记事本内容部分创建了一个按钮：

<button class="readNoteButton" @click="readNote">view note one</button> 

并将带有显示注释组件的部分更改为：

<section v-if="readingNote === true" class="">
<show-note
@open-note="openNote"
v-for="note in notes"
:key="note.id"
:note="note"
></show-note>
</section>

我现在的问题是弄清楚如何让每个按钮的详细信息分别显示