vue 获取数据无法渲染视图

Question

先上代码

<template>
    这里粗略表示一下,显示对应分组数据的
    <div>
        <p v-for=item in currentData>
            {{item.name}}
        </p>
    </div>
</template>
data () {
    products: [[], [], [], []]
    activeIndex: 0
},
methods: {
    getDefaultData () {
        this.$axios.get(url).then(res => {
            this.products[this.activeIndex] = res.data.data
        })
    }
},
computed: {
    currentData () {
        return this.products[this.activeIndex]
    }
},
created () {
    this.getDefaultData()
}

描述一下, 有四个分组,四个分组显示自己对应的商品,点击每个分组,会将当前分组的索引值赋值给activeIndex,接口地址基本相同区别就是这个索引值来获取不同分组的数据.
当created首次获取数据的时候,this.products[this.activeIndex]可以知道已经取到了数据,第一页十条,但是在视图上却没有更新出来数据

如图

---

当我随便点击一次按钮之后数据就显示出来了,但也只是显示一次!

请各位大佬帮忙,谢谢

Answer 1

自己回答下
还是自己掌握不清楚,惭愧

// 原来的代码
this.products[this.activeIndex] = res.data.data
// 修改后的代码
this.$set(this.products, this.activeIndex, res.data.data)

这样就可以更新了,谢谢大家

Answer 2

应该是这个原因

Answer 3

products改成{0:[],1:[],2:[],3:[]}

Answer 4

this.products[this.activeIndex] = res.data.data  
改成
Vue.set(this.products, this.activeIndex, res.data.data)