1

在我的 vuejs 应用程序中，我使用 vue-router 进行路由。除了这个，一切都很好。

在我的父母中，我的列表视图在左侧有如下链接。

<div class="col-md-5">
<ul>
    ....
    <a v-link="{ name: 'task-detail', params: { taskId: task.id }}">{{ task.title }}</a>
</ul>
</div>

<div class="col-md-7">
  <router-view></router-view>
</div>

当我单击它时，我的嵌套路线被激活，并在右侧显示详细视图。

现在我的问题是在我的父视图中，我可以切换任务是否完成。

我有一个标签显示任务是否在子视图中完成。

<label class="label label-success pull-right" v-show="task.is_completed">Completed</label>

当我在父视图中执行此操作时，如何在我的子视图中反映状态更改。我需要刷新页面吗？还是有更简单的解决方案。

简单来说，当我在父视图上切换完成状态时，我的标签应该在子视图上更改。

4

2 回答 2

1

所以 vue 希望你实现一个“数据向下/动作向上”模式。因此，如果您的数据在父项中加载（例如作为集合）并再次加载 - 分别在您的子项中（例如作为模型实例） - 您有两组以相同数据开头的内容。但是当你改变一个时，它独立于另一个。因此，您要么需要在两者之间进行通信（这可能很繁琐），要么使用中央数据存储，两条路由都访问相同的数据实例（如果您愿意，可能使用 Vuex），或者如果您拥有所有您在集合中需要的数据，只需将其传递到下游，例如： <router-view :task="selectedTask" />所选任务由$route.params.idURL 中的驱动（可能作为父级中的计算属性）

例如，如果您的任务列表在父级中称为“任务”，您的计算属性可能如下所示（在 ES6 JS 中）：

selectedTask () {
  return this.tasks.find(t => t.id === this.$route.params.id)
}

这种数据下降是最容易实现的，但如果你发现你经常这样做，建议使用中央数据存储。

于 2016-09-07T16:12:38.073 回答
0

如果您在子视图中尝试此操作是否有效<label class="label label-success pull-right" v-show="$parent.task.is_completed">Completed</label>

于 2016-09-07T15:01:39.637 回答