Question

我想显示一个条目列表，并通过从服务器检索JSON，对其进行解析，将其存储在Vuex.Store中并使用v-for-"entry in this.$store.state.entries"对其进行迭代来进行工作。

当用户首次访问页面时，所有条目都将可见。下一步是过滤条目，以便仅匹配的条目保持可见。由于此过滤将发生很大变化，因此我想使用v-show。我有一个单独的组件，该组件使用户可以输入搜索词，查询服务器并返回数字数组（匹配ID）。我只想显示ID与数组queriedEntries中的数字匹配的条目。我的模板如下：

<template>
    <div id="entries">
        <div v-for="entry in this.$store.state.entries"
            v-html="entry.content"
            v-show="this.$store.state.queriedEntries.includes(entry.id)">
        </div>
    </div>
</template>

我得到了一个我不理解的错误，并且搜索答案并没有产生任何结果，因为它与其他人遇到的问题不匹配。

[Vue warn]: Error in render: "TypeError: this is undefined"

它是this中的v-show，但其他this都可以使用。怎么了？

Answer 1

由于您在模板内部引用this，因此出现了您的问题。这不是必需的。

我建议您做的第一件事是阅读Vuex的Getters。在同一页面的下方，您将找到有关mapGetters的信息。这将有助于防止您直接定位/修改州内的数据。数据修改应仅留给Mutations和Actions。

例如，您的代码可能如下所示：

// in your component script
...
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      allEntries: 'entries', // map state.entries to the name 'allEntries'
      queriedEntries, // your other state value. You may want to convert this to a getter
      // other state values if necessary
    })
  }
}
...


// in your component template
<template>
    <div id="entries">
        <div v-for="entry in allEntries"
            v-html="entry.content"
            v-show="queriedEntries.includes(entry.id)">
        </div>
    </div>
</template>
...

在这里您可以看到我们使用了mapState，它可以根据商店中的数据帮助生成计算的getter函数。然后，我们可以在模板中使用分配给它的属性名称。

Answer 2

按照建议，我最终从this之外的所有内容中删除了v-for，并且代码可以正常工作了。为什么this导致v-show错误而v-html仍然是个谜。

最终有效代码：

<div v-for="(entry, entryindex) in this.$store.state.entries"
 v-bind="{id:entryindex}"
 v-bind:key="entryindex" 
 v-show="$store.state.queryMatchedEntries[0] == -1 || $store.state.queryMatchedEntries.indexOf(parseInt(entryindex)) != -1">

将v-for与v-show结合在模板中的同一元素上

2 个答案: