vue.js 和事件中的数据绑定问题

Question

我正在开发一个基本的记事本应用程序，目前功能很简单，创建一个笔记，完成后从以前创建的笔记列表中单击笔记以查看其详细信息。我无法单击注释并查看详细信息，而是在记事本模板底部看到组件 ShowNote.vue 的详细信息，为了查看详细信息，我必须制作 v-if ="noteIsOpen 为假"。我也无法从 ShowNote.vue 文件中的数据绑定中看到数据。此外，当您单击加号按钮时，注释中的详细信息会填充按钮在单击时生成的页面。我将在下面粘贴我的代码的屏幕截图。请帮我解决这个问题。我试过修复道具，当我修复时，我终于能够看到笔记细节了。

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" 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>
      </section>

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

      <section class="notepad-content" v-if="noteIsOpen === true">
        <show-note 
        :note="notes"
        @open-note="readNote"
        />
      </section>

      <section class="notepad-content" v-if="noteIsOpen === false">
        <show-note 
        :note="notes"
        @open-note="openNote"
        />
      </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,
      noteIsOpen: false,
      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.noteIsOpen = !this.noteIsOpen;
    },
  },
};
</script>

AddNoteButton.vue

<template>
  <div class="add-note-container" @click="openEditor">
    <b-icon-plus-circle></b-icon-plus-circle>
  </div>
</template>

<script>
import {BIconPlusCircle} from 'bootstrap-vue';
export default {
  emits: ['open-editor'],
  components: {
    BIconPlusCircle
  },
  methods: {
    openEditor() {
      console.log('hello');
      this.$emit('open-editor');
    }
  }
}
</script>

NoteList.vue

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

    },
  },
};
</script>

ShowNote.vue

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

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

Answer 1

在您的 NoteList.vue 中，您正在发出事件“open-note”。但是这个事件永远不会在名为 App.vue 的父组件中捕获。您必须绑定此事件，以便在您单击注释条目时收到通知。类似于 @open-note="openNote".

Answer 2

我想出了如何在点击笔记时显示详细信息，现在我在记事本内容部分创建了一个按钮：

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

并将带有显示注释组件的部分更改为：

  <section v-if="readingNote === true" class="">
    <show-note
      @open-note="openNote"
      v-for="note in notes"
      :key="note.id"
      :note="note"
    ></show-note>
  </section>

我现在遇到的问题是弄清楚如何让与每个按钮相关的详细信息单独显示

vue.js 和事件中的数据绑定问题

Issues with data bind in vue.js and events

data-binding

dom-events

vue.js