vue.js - Vue 组件在第二次访问时未呈现

Question

我有一个 Vue 组件，其中列出了一堆可点击的标签。当您点击一个标签时，它会将您带到另一个页面，其中包含包含该标签的对象列表。

组件代码的相关部分是:

<template>
<div>
  <h2>All Tags</h2>
  <TagList v-bind:tags="tags"/>
</div>
</template>
...
<script>
import TagList from './TagList'
export default {
  name: 'AllTags',
  components: {
    TagList
  },
  data () {
    return {
      tags: []
    }
  },
  mounted () {
    tags = // array loaded from a database
  }
}
</script>

当我最初查看该页面时，一切正常。但是，如果我浏览此列表，例如通过单击单个标签，然后向后浏览，我只看到 <h2>All Tags</h2> header 。在浏览器中使用 Vue 调试器，我可以看到数据仍然存在。

我正在使用 <router-view :key="$route.fullPath">控制整个应用程序并怀疑问题出在按键上。

有人能给我指出正确的方向吗？我怎样才能得到 TagList每次访问该应用程序页面时要呈现的组件？

编辑:这是 TagList 的代码组件:

<template>
<div class="tags">
  <Tag v-for="tag in tags" v-bind:tag="tag" v-bind:key="tag" />
</div>
</template>

<script>
import Tag from './Tag'
export default {
  name: 'TagList',
  props: ['tags'],
  components: {
    Tag
  }
}
</script>

Answer 1

您可以尝试删除 v-bind 所有认为它不需要使用，我已经检查了您的代码它似乎在访问标签并返回后工作正常，所有标签仍然呈现。您可以查看此工作示例。

https://codesandbox.io/s/vue-template-3tcs4?fontsize=14