Question

我正在创建一个RESTful项目管理API（MEVN堆栈）。创建新项目时，我有很多输入，这些输入被分成不同的选项卡（使用Bootstrap Vue）。

目前，我将所有组件都集成到一个组件中，该组件现在变得越来越令人困惑且越来越大。因此，我试图拆分组件中的每个选项卡，但是我很难弄清楚应如何从每个组件中检索数据。

目前我有以下方法：

NewProject.vue

每个空数组代表一个制表符。

newProject: {
  general: []
  calculation: []
  generalChecklist: []
  orderChecklist: []
}

OrderChecklistProjectProject.vue

data: () => ({
  checklist: [
    {
      label: 'Some descriptive label - 1',
      inputs: [{
          type: 'checkbox',
          value: false
        },
        {
          type: 'date',
          value: ''
        },
      ]
    },
    {
      label: 'Some descriptive label - 2',
      inputs: [{
          type: 'checkbox',
          value: false
        },
        {
          type: 'date',
          value: ''
        },
      ]
    },
    ....
})

NewProject.vue-addProject方法

async addProject() {
  this.project.orderChecklist = this.$refs.orderChecklistComponent._data.checklist
  ...
  // build project array
  await this.$store.dispatch('projectStoreModule/create', this.newProject)
  this.$router.push('/projects')
}

一切似乎都可以正常工作，mongoDB中的文档也正确，并且可以在我的ShowProject.vue上正确显示

但是由于我仍在学习Vue并使用MEVN堆栈，所以我不知道我的方法是否可行，或者这样做是否有不利之处。

任何帮助或暗示我做错了什么/我可以做的更好的将不胜感激！

谢谢！

Vue JS-使用this。$ refs

0 个答案: