v-for 不重新渲染数组 vue js

Question

我有一个 SPA，我在其中使用 v-for 显示口袋妖怪数组，并可以选择按类型或世代过滤这些列表。我有一个清除过滤器的按钮（将类型设置为“”并将生成设置为第 1 代），但 v-for 循环不会在清除过滤器后重新呈现数组。我已经记录了 returns 口袋妖怪数组的功能以确认它正在工作，但 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 的函数调用更改 allPokemon 的属性，但 Vue.JS 找不到更改 (documentation)，因此需要注意以不同的方式处理这个问题，因为 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 可以玩的地方。

v-for 不重新渲染数组 vue js

v-for not re-rendering array vue js

javascript

vue.js

v-for

vue-reactivity