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

Question

我用我的记事本应用程序从头开始，在此处找到：

问题是我似乎无法单击 NoteList.vue 中的注释来查看详细信息，我的绑定某处断开连接，事件处理程序似乎无法正常工作它正在抛出一个未处理的错误：[Vue warn]: 在在

这是我的代码：

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

我明白了，我有方法，没有方法，我从方法中遗漏了 's'，现在我可以看到 consol.log 消息，仍在努力查看注释详细信息.更近一步！

Answer 2

也许再加一个：我刚在Vue组件中把Vuex的...mapActions加到computed属性中遇到了这个问题。 ...mapActions 属于 methods.

错误：

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

正确：

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

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

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

data-binding

dom-events

vue.js