v-for not re-rendering array vue js

Question

我有一个SPA，我在其中使用v-for显示口袋妖怪数组，并可以选择按类型或世代过滤这些列表。我有一个清除过滤器的按钮(将类型设置为"并将生成设置为第 1 代(，但在清除过滤器后，v-for 循环不会重新渲染数组。我已经记录了返回口袋妖怪数组以确认它正常工作的函数，但 Vue JS 没有呈现结果。我不知道如何进行。

<div class="pokemon"
v-for="pokemon in filteredPokemon"
:key="pokemon.id">
<h2>{{ pokemon.name }}</h2>
</div>
<script>
import Pokemon from '../pokeData'
export default{
props: ['searchFilters'],
data(){
return{
allPokemon: [],
}
},
created(){
this.allPokemon = Pokemon.getPokemon('gen1');
},
computed: {
filteredPokemon: function(){ 
if(this.searchFilters.type){
if(this.searchFilters.type === ''){
return this.allPokemon
}
return this.allPokemon.filter(pokemon => {
if(pokemon.types.length === 2){
if(pokemon.types[0].type.name == this.searchFilters.type || pokemon.types[1].type.name == this.searchFilters.type){
return true
}
}
else if(pokemon.types[0].type.name == this.searchFilters.type){
return true
}
})
}
return this.allPokemon
}
},
watch:{
'searchFilters.generation': function(generation){
this.allPokemon = Pokemon.getPokemon(generation)
}
}
}
}
</script>

Answer 1

farincz 是对的，您正在使用对 getPokemon 和 Vue 的函数调用来更改 allPokemon 的属性.JS找不到更改(文档(，因此这是一个警告，您需要以不同的方式处理这个问题，因为 Vue 不支持您想要的方式。

我会使用带有计算值的过滤器方法过滤所有口袋妖怪，并将过滤器值绑定到数据属性：

.HTML：

<template>
<div>
<textarea v-model="text" name="filter" cols="30" rows="2"></textarea>
<div class="pokemon" v-for="pokemon in filteredPokemon" :key="pokemon.id">
<h2>{{ pokemon.name }}</h2>
</div>
</div>
</template>

JS文件：

new Vue({
el: "#app",  
data(){
return{
text: '',
pokemons: [
{gen: 'gen1', name: 'psyduck', id: '1'},
{gen: 'gen1', name: 'charizard', id: '2'},
{gen: 'gen1', name: 'pikachu', id: '3'},
{gen: 'gen2', name: 'togapi', id: '4'}   
]
}
},
computed: {
filteredPokemon() {
if(this.text === '') return this.pokemons
return this.pokemons.filter(x=>x.gen === this.text)
}
}
})

这是要玩的 JSFIDDLE。