vue.js - 我在 vue.js 中遇到错误-“filteredTeamsData”计算属性中的意外副作用

Question

“filteredTeamsData”计算属性中的意外副作用

我已经导入了两个 JSON 文件

1. 从'../assets/data/season_list.json'导入季节列表
2. 从“../assets/data/match_team.json”导入团队数据

代码 -

export default {
  name: 'SeasonSplit',
  components: {
       TableElement,
        },
    data () {
    return {
      selected: '1',
      teamData: teamData,
      teamList: [],
      seasonList: seasonList,
      filteredData: [],
      tableColumns: ['toss_wins', 'matches', 'wins', 'losses', 'pts']
    }
  },
  computed: {
      filteredTeamsData: function () {
        this.dataArr = []
        this.filteredData = []
        this.teamList = []
        teamData.forEach(element => {
            if(element.season == seasonList[this.selected-1]){
              this.filteredData.push(element)
              this.teamList.push(element.team)
              this.dataArr.push(element.wins)
            }
        })
        // console.log(this.filteredData)
        return this.dataArr
      }
  }
}

标签： vue.jscomputed-properties

Answer 1

我会这样做：

export default {
  name: 'SeasonSplit',
  components: {
       TableElement,
        },
    data () {
        let filteredData = [];
        let teamList = [];
        let dataArr = [];
        teamData.forEach(element => {
            if(element.season == seasonList[this.selected-1]){
              filteredData.push(element)
              teamList.push(element.team)
              dataArr.push(element.wins)
            }
        });
    return {
      selected: '1',
      teamData: teamData,
      teamList: teamList ,
      seasonList: seasonList,
      filteredData: filteredData ,
      tableColumns: ['toss_wins', 'matches', 'wins', 'losses', 'pts'],
      filteredTeamsData: dataArr
    }
  }