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>标头。使用浏览器中的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

Vue组件在第二次访问时未呈现

1 个答案: