vue.js和事件中的数据绑定问题 [英] Issues with data bind in vue.js and events

问题描述

我正在使用一个基本的记事本应用程序，现在该功能很简单，创建一个便笺，完成后从以前创建的便笺列表中单击便笺以查看其详细信息.我无法单击注释并查看详细信息，而是在记事本模板的底部看到了组件ShowNote.vue的详细信息，为了查看详细信息，我必须使v-if ="; noteIsOpen to false".我也无法从ShowNote.vue文件中的数据绑定中看到数据.同样，当您单击加号按钮时，注释中的详细信息将填充单击该按钮时生成的页面.我将在下面粘贴我的代码的屏幕截图.请帮我解决这个问题.我已经尝试过修复道具，当我这样做的时候，我终于能够看到音符的细节.

I am working on a basic notepad app, for now the functionality is simple, create a note, when done click on the note from a list of previous created notes to view its details. I am not able to click on the note and see the details, instead I see the details of the component ShowNote.vue on the bottom of the notepad template, and in order to see the details I have to make the v-if="noteIsOpen to false". I am also not able to see the data from the data bind in ShowNote.vue file. Also when you click on the plus button the details from the note populate the page the button generates when clicked. I will paste screen shots of my code below. Please help me figure this out. I have tried to fix the props, and when I did I was able to see the note details finally.

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

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

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

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>

推荐答案

我想出了如何在单击笔记时获取显示的详细信息，现在，我在记事本内容部分中创建了一个按钮:

I figured out how to get the details to show when clicking on the note, for now I created a button in the notepad-content section:

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

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

and changed the section with the show note component to:

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

我现在要解决的问题是如何获取有关每个按钮的详细信息以分别显示

issue I have now is figuring out how to get the details to show separately pertaining to each individual button

这篇关于vue.js和事件中的数据绑定问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！