Javascript v-for不重新渲染阵列vue js

我有一个SPA，我用v-for显示口袋妖怪的数组，可以选择按类型或代过滤这些列表。我有一个清除过滤器的按钮（将类型设置为“”，将generation设置为generation 1），但是v-for循环在清除过滤器后不会重新渲染数组。我已经记录了返回pokemon数组以确认其工作的函数，但是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>

{{pokemon.name}}
从“../pokeData”导入口袋妖怪
导出默认值{
道具：['searchFilters']，
数据（）{
返回{
所有口袋妖怪：[]，
}
},
创建（）{
this.allPokemon=Pokemon.getPokemon（'gen1'）；
},
计算：{
filteredPokemon:函数（）{
if（this.searchFilters.type）{
if（this.searchFilters.type==''）{
归还这个。所有口袋妖怪
}
返回此.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）{
返回真值
}
}
else if（pokemon.types[0].type.name==this.searchFilters.type）{
返回真值
}
})
}
归还这个。所有口袋妖怪
}
},
观察：{
“searchFilters.generation”：函数（生成）{
this.allPokemon=Pokemon.getPokemon（生成）
}
}
}
}

farincz是正确的，您正在通过对getPokemon的函数调用更改allPokemon的属性，Vue.JS无法找到更改（），因此这是一个警告，您需要以不同的方式处理，因为Vue不支持您想要的方式

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

HTML:

---

这里是可以玩的地方。

您可能修改了searchFilters属性，而Vue对此并不了解。看你说的对，清除过滤器按钮将searchFilters.generation设置为“gen1”，将searchFilters.type设置为“”；但它们是计算属性，searchFilters.generation上有一个观察者。它们在计算时反应良好，但vuejs在将数组设置回原始数组时不会重新渲染数组。我已经阅读了您链接的文档，但不明白使用$set如何解决此问题

<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>

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)
    }
  }
})