Getting error: Error: _ctx.openNote is not a function when I attempt to click a note to view

Question

I stared from scratch with my notepad app, found here: Issues with data bind in vue.js and events

The issue was I can not seem to click on the note from NoteList.vue to see the details, there is a disconnect somewhere with my bind, and the event handler doesn't seem to work it is throwing an unhandled error: [Vue warn]: Unhandled error during execution of native event handler at <NoteList key=1 note={id: 1, title: "Note one title", body: "This is note ones body content"} > at

Here is my code:

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">
        <note-list
          v-for="note in notes"
          :key="note.id"
          :note="note"
        ></note-list>
        <!-- <add-note-button></add-note-button> -->
      </section>

      <section class="notepad-editor">
        <!-- <save-button></save-button> -->
      </section>

      <section class="show-note"
      v-if="readingNote" === true">
        <show-note
          @open-note="readNote"
          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 {
      readingNote: false,
      notes: [
        {
          id: 1,
          title: "Note one title",
          body: "This is note ones body content"
        },
        {
          id: 2,
          title: "Note two title",
          body: "This is the second notes body content"
        }
      ],
      methods: {
        readNote() {
          this.readingNote = !this.readingNote;
        }
      }
    };
  },
};
</script>

NoteList.vue

<template>
  <div>
    <p @click="openNote">{{ note.title }}</p>
    <hr />
  </div>
</template>
<script>
export default {
  emits: ["open-note"],
  props: {
    note: {}
  },
  method: {
    openNote() {
      this.$emit("open-note");
      console.log("note opened!");
    }
  }
};
</script>

ShowNote.vue

<template>
  <div>note details: {{ note.body }}</div>
</template>

<script>
export default {
  props: {
    note: {}
  }
};
</script>

Answer 1

I figured it out, I had method, not methods, I was missing the 's' from methods, now I am able to see the consol.log message, still working on seeing the note detail. One step closer!

Answer 2

Maybe adding one more: I just encountered this when I added Vuex's ...mapActions into computed property in Vue component. ...mapActions belongs to methods.

WRONG:

computed: {
    ...mapGetters('AppStore', ['navigation', 'isNavigationCollapsed']),
    ...mapActions('AppStore', ['toggleNavigation'])
}

CORRECT:

computed: {
    ...mapGetters('AppStore', ['navigation', 'isNavigationCollapsed'])
},
methods: {
    ...mapActions('AppStore', ['toggleNavigation'])
}