如何在单击事件时从 vue.js 实例中的 for 循环中提取特定数据

Question

I have a notepad app, where you click on the note and you see the details of that note, I have a for loop for the notes and I need to know how I can extract the data from the notes array and show the specific note details pertaining to that note. For example, I want to click on note1 and see the details for that note only, when I click on the second note, same idea.

I am seeing all the note data on the click event. How do I extract the data from the vue.js instance to show the specific data? How do I click on the actual note, not the button(for testing only) to see this data?

Thank you in advance:)

Here is the code I have so far:

App

<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>

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

      </section>

      <section class="notepad-editor" v-if="editorIsOpen === true">
        <save-button></save-button>
      </section>

      <section v-if="readingNote === true" class="">
        <show-note
          @open-note="openNote"
          v-for="(note) in notes"
          :key="note.id"
          :note="note"
        ></show-note>
      </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,
      readingNote: false,
      openNote: false,
      props: {
        note: {
          required: true,
        },
      },
      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.readingNote = !this.readingNote;
      document.querySelector('.readNoteButton').innerHTML="close note"
      document.querySelector('.readNoteButton2').innerHTML="close note"
      // alert('you clicked me!');
    },
  },
};
</script>

NoteList

<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 {
  name: 'noteList',
  emits: ['open-note'],
  props: {
    note: {
      required: true,
    },
  },
  methods: {
    openNote() {
      this.$emit('open-note');
      console.log("clicked from NoteList");

    },
  },
};
</script> 

ShowNote

<template>
  <div>
    <p>
   note details: 
    Note ID: {{ note.id }}, Date: {{ note.date }},
    Title: {{ note.title }}, Body: {{ note.body }}
    </p>
  </div>
</template>

<script>
export default {
  name: 'showNote',
  props: {
    note: {
      required: true,
    }
  },
  
};
</script>

Answer 1

I am giving some modifications need to work

Pass note with the event.

openNote() {
      this.$emit('open-note', this.note);
      console.log("clicked from NoteList");

 },

listen event at parent

 <note-list
          v-for="note in notes"
          :key="note.id"
          :note="note"
          @open-note="readNote" >
 </note-list>

declare a property in data object called currentNode: {}

 data() {
    return {
      editorIsOpen: false,
      readingNote: false,
      currentNode: {} // +====> add new property
      ....
}
}

modify readNote method

readNote(note) {
      this.currentNote = note;
      this.readingNote = !this.readingNote;
      document.querySelector('.readNoteButton').innerHTML="close note"
      document.querySelector('.readNoteButton2').innerHTML="close note"
      // alert('you clicked me!');
    },