title: How do you isolate the id of an object to show specified data related to that id?
body: <p>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.</p>
  <p>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.</p>
  <p>Here is my code, I am some what new to vue and javascipt</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  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 =&gt; 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,
        })
      }
    },
  };
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div class="body"&gt;
      &lt;div class="notepad-container h-75 w-75"&gt;
        &lt;header class="header d-flex justify-content-center align-items-center"&gt;
          &lt;h4&gt;Light Notepad v1&lt;/h4&gt;
        &lt;/header&gt;
  
        &lt;section class="notepad-content" v-if="editorIsOpen === false"&gt;
          &lt;note-list
            v-for="note in notes"
            :key="note.id"
            :note="note"
            @open-note="readNote(showNote)"
          &gt;&lt;/note-list&gt;
          &lt;add-note-button @open-editor="openNewEditor"&gt;&lt;/add-note-button&gt;
        &lt;/section&gt;
  
        &lt;section class="notepad-editor" v-if="editorIsOpen === true"&gt;
          &lt;save-button&gt;&lt;/save-button&gt;
        &lt;/section&gt;
  
        &lt;!-- notes section --&gt;
        &lt;section v-if="readingNote === true" class=""&gt;
          &lt;div v-for="note in notes" :key="note.id"&gt;
            {{ selectedNotes.noteId }} 
            &lt;!-- &lt;show-note :note="note"
                  @open-note="openNote"&gt;&lt;/show-note&gt; --&gt;
          &lt;/div&gt;
        &lt;/section&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script&gt;
  export default {
    name: "noteList",
    emits: ["open-note"],
    props: {
      note: {
        required: true,
      },
    },
    methods: {
      openNote() {
        this.$emit("open-note");
      },
    },
  };
  &lt;/script&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;template&gt;
    &lt;div&gt;
      &lt;b-list-group&gt;
        &lt;b-list-group-item class="select" button @click="openNote(note.id)"
          &gt;{{ note.title }} - {{ note.date }}
        &lt;/b-list-group-item&gt;
      &lt;/b-list-group&gt;
    &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>