Question

我目前正在构建一个电子应用程序。它基于电子战，buefy等。

所以我得到了projects.vue（这是父母）以及位于第二个标签中的Addproject.vue（子组件）。

从父组件中，我可以转到activeTab = 1并输入我的数据以创建一个新项目。当我将数据持久存储在localStorage中之后，我将被重定向到activeTab = 0。

要保留数据，我写了一个persist方法：

    persist () {
    this.projects.push({id: this.projects.length, projectname: this.projects.name, ...})
    location.reload()
//to get back to tab 0 and fetch the data on reload, as localStorage isn't async
    }

将在projects.vue中创建一个新项目，其中显示一些已添加到localStorage的数据。像项目名称，标题图像，删除和编辑按钮一样。

要删除项目，请使用以下方法将其从localStorage中删除：

    removeProject (project) {
      this.projects.splice(this.projects.indexOf(project), 1)
      localStorage.setItem(STORAGE_KEY, JSON.stringify(this.projects))
    }

但是我无法使“编辑”按钮起作用。它应该重定向到activeTab = 1并加载选定的项目。

我添加了一个小提琴来演示： https://jsfiddle.net/chrtz/eywraw8t/115662/

不幸的是，一旦我添加了方法，选项卡导航似乎就停止了。但也许足以获得线索。

问题

所以问题是：

如何使编辑方法起作用
从本地存储中选择的项目
并将其加载到addproject.vue

通常我使用mount，例如：

mounted () {
    if (localStorage.title) {
      this.title = localStorage.title
    }

，但是来自项目的数据在JSON数组内部。所以这行不通。

要检索projects.vue中的数据我使用create，例如：

 created () {
    console.log('storage mounted')
    if (localStorage.getItem('projects')) {
      this.projects = JSON.parse(localStorage.getItem(STORAGE_KEY || []))
    }
  }

我试图通过this。$ root。$ emit和this。$ root。$ on绑定组件，但是无法使数据装入工作。我什至不知道如何才能抓住所选的项目。

非常感谢您的帮助。

///我现在仅使用localStorage，因为这是持久保存数据的方法。这只是一个学生项目。

vuejs-调用父级中的编辑功能，并从子级组件中的本地存储中加载请求的数据

0 个答案: