How do you isolate the id of an object to show specified data related to that id?

Question

I have a note pad app I am building, trying to figure out how to isolate a specific id to show the data in the object related to that id.

the goal is to click on note one and show data for that note only, like wise click on note two and show the data for note two.

Here is my code, I am some what new to vue and javascipt

<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

this is the answer, I got it from the Vue.js forum:

For the sake of simplicity let’s assume you want to only select one note at a time with this event:

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

We then want to get that specific note from the array

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

then within your template to display it:

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

As you can see, we no longer need to store a isSelected property on the note and we can reduce the state booleans by just checking if the selectedNote is not falsly.

Answer 2

I don't know how your component note-list are. But have you tried to pass the note as parameter?

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