如何隔离对象的id来显示与该id相关的指定数据?

Question

我有一个笔记本应用程序，我正在建设，试图找出如何隔离一个特定的id来显示与该id相关的对象中的数据。

目标是单击注释1并仅显示该注释的数据，就像明智地单击注释2并显示注释2的数据。

这是我的代码，我是一些新的价值和javascript

<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,
readingNote: false,
openNote: false,
showNote: true,
props: {
note: {
required: true,
},
},
selectedNotes: [],
notes: [
{
id: 1,
title: "1st Note",
body: "Body of note 1",
date: "10/17/20",
isSelected: true,
},
{
id: 2,
title: "2nd Note",
body: "Body of note 2",
date: "11/17/20",
isSelected: false,
},
],
};
},
// computed: {
// filterNotes: function() {
//  return this.notes.filter(note => note.title.indexOf(this.title))
// }
},
methods: {
openNewEditor() {
this.editorIsOpen = !this.editorIsOpen;
},
readNote(note) {
console.log("readNote: ", note);
this.readingNote = note;
},
addSelectedNote(id, body) {
console.log('note:' , this.noteId)
this.selectedNotes.unshift({
noteId: id,
noteBody: body,
})
}
},
};
</script>

<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"
@open-note="readNote(showNote)"
></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>
<!-- notes section -->
<section v-if="readingNote === true" class="">
<div v-for="note in notes" :key="note.id">
{{ selectedNotes.noteId }} 
<!-- <show-note :note="note"
@open-note="openNote"></show-note> -->
</div>
</section>
</div>
</div>
</template>

<script>
export default {
name: "noteList",
emits: ["open-note"],
props: {
note: {
required: true,
},
},
methods: {
openNote() {
this.$emit("open-note");
},
},
};
</script>

<template>
<div>
<b-list-group>
<b-list-group-item class="select" button @click="openNote(note.id)"
>{{ note.title }} - {{ note.date }}
</b-list-group-item>
</b-list-group>
</div>
</template>

Answer 1

我不知道你的组件笔记列表是如何的。但是你试过把这张纸条作为参数传递吗?

<section class="notepad-content" v-if="editorIsOpen === false">
<note-list
v-for="note in notes"
:key="note.id"
:note="note"
@open-note="readNote(note)" //this line 
></note-list>
<add-note-button @open-editor="openNewEditor"></add-note-button></section>

Answer 2

这是答案，我从Vue.js论坛上得到的:

为了简单起见，让我们假设您想一次只选择一个音符:

@open-note="readNote(note.id)"

然后我们想从数组

中获取特定的注释

// ...
selectedNote: null,
// ...
readNote(id) {
this.selectedNote = this.notes.find(note => note.id === id);
}

然后在你的模板中显示它:

<section v-if="selectedNote">
{{ selectedNote.title }} 
</section>

正如你所看到的，我们不再需要在note上存储isSelected属性，我们可以通过检查selectedNote是否为false来减少状态布尔值。