Question

我希望vue组件（TodoItem）从mongodb获取ObjectId。

这是我的TodoApp的工作方式：

TodoApp使用Vue，Express，Mongodb
它还使用Vuex存储更改状态
主要有两个部分：父级的TodoList，子级的TodoItem
在创建/读取/更新/删除数据时，TodoList / TodoItem调用Vuex的操作。

TodoList通过调用retrieveTodos从mongodb获取Todo数据然后retriveTodos从MongoDB获取Todo数据并将其存储在vuex状态。

TodoList.vue

<template>
  <div>
    <input type="text" class="todo-input" placeholder="해야할 일" v-model="newTodo" @keyup.enter="addTodo">
    <draggable v-model="todosFiltered" group="todos" @start="drag=true" @end="drag=false">
      <transition-group name="fade" enter-active-class="animated fadeInUp" leave-active-class="animated fadeOutDown">
      <todo-item v-for="todo in todosFiltered" :key="todo._id" :todo="todo" :checkAll="!anyRemaining">
      </todo-item>
      </transition-group> 
    </draggable>

      <div class="extra-container">
        <todo-check-all></todo-check-all>
        <todo-items-remaining></todo-items-remaining>
      </div>

      <div class="extra-container">
        <todo-filtered ></todo-filtered>

        <div>
            <transition name="fade">
                <todo-clear-completed></todo-clear-completed>
            </transition>
        </div>
      </div>
  </div>
</template>

...

created() {
      this.$store.dispatch('retrieveTodos')
},

问题出在TodoItem

TodoItem.vue

<template>
    <div class="todo-item">
        <div class="todo-item-col">
            <div class="todo-item-left">
              <input type="checkbox" v-model="completed" @change="doneEdit">
              <double-click v-if="!editing" @single-click="recordTodo" @double-click="editTodo" class="todo-item-label" :class="{ completed : completed }">{{ priority }} {{ title }}</double-click>
              <input v-else class="todo-item-edit" type="text" v-model="title" @blur="doneEdit" @keyup.enter="doneEdit" @keyup.esc="cancelEdit" v-focus>  
            </div>
            <div v-if="recording" v-click-outside="doneRecord" @keyup.enter="doneRecord" @keyup.esc="cancelRecord">
              <input type="date" class="todo-item-date" v-model="due"> 
              <input type="text" class="todo-item-note" v-model="note" v-focus placeholder="내용을 기록하세요">
            </div>
        </div>
        <div>
            <button @click="pluralize">Plural</button>
            <span class="remove-item" @click="removeTodo(todo._id, todo.priority)">
                &times;
            </span>
        </div>

    </div>
</template>

...

    props: {
        todo: {
            type: Object,
            required: true,
        },
        checkAll: {
            type: Boolean,
            required: true,
        }
    },
    data() {
        return {
            '_id': this.todo._id,
            'priority': this.todo.priority,
            'title': this.todo.title,
            'due': this.todo.due,
            'note': this.todo.note,
            'completed': this.todo.completed,
            'expired': this.todo.expired,
            'editing': this.todo.editing,
            'recording': this.todo.recording,
            'beforeEditCache': '',
            'beforeNoteCache': '',
        }
    },

在TodoItem中，仅存储_id（mongodb数据的ObjectId）。除_id以外的所有其他属性都存储良好

我该如何解决？

（此代码来自youtube课程https://www.youtube.com/watch?v=Ork8274eqYo&list=PLEhEHUEU3x5q-xB1On4CsLPts0-rZ9oos&index=5的教程）

我试图：

从Mongodb（retrieveTodo）读取后，我检查的数据在Vuex状态下存储良好。但是它甚至存储了很好的ObjectID（我在控制台上检查了它）
如果我尝试在TodoItem中使用this._id，则返回undefined

doneEdit() {
          if(this.title.trim() == '') {
              this.title = this.beforeEditCache
          }
          this.editing = false
          console.log('doneEdit ', this._id)
          this.$store.dispatch('updateTodo', {
            '_id': this._id,
            'priority': this.priority,
            'title': this.title,
            'due': this.due,
            'note': this.note,
            'completed': this.completed,
            'expired': this.expired,
            'editing': this.editing,
            'recording': this.recording,
          })
        },

Vue组件如何从mongodb获取ObjectId

0 个答案: