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

问题描述

我正在开发一个基本的记事本应用程序，现在功能很简单，创建一个笔记，完成后单击以前创建的笔记列表中的笔记以查看其详细信息。我无法单击笔记并查看详细信息，而是在记事本模板底部看到组件 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>

标签： vue.jsdata-bindingdom-events

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

问题描述

解决方案

推荐阅读