vue 国际化引入vue-i18n后，html正常，但是v-for里的data切换语言不起作用

Question

代码如下：
html：

<div class = "a">
    <span :class="{active: isTable == 'a'}" @click = "table('a')">{{ $t("EOSGame.shaiZi.part1") }}</span>
    <span :class="{active: isTable == 'b'}" @click = "table('b')">{{ $t("EOSGame.shaiZi.part2") }}</span>
</div>
<div class = "thead">
    <span v-for = "thead in theads" :key = "thead.name">{{thead.name}}</span>
</div>    

js:

export default {
    data () {
        return {
            theads: [
                {name: this.$t('EOSGame.shaiZi.part3')},
                {name: this.$t('EOSGame.shaiZi.part4')},
                {name: this.$t('EOSGame.shaiZi.part5')},
                {name: this.$t('EOSGame.shaiZi.part6')},
            ],
        }
    }
}

其中，part1和part2都可以点击按钮实时正常切换，但是v-for里的不会改变，但是如果刷新页面就会切换语言。
原因是什么呢？怎么样让theads里的也可以实时切换中英文？

Answer 1

自己领悟

export default {
    data () {
        return {
            theads: [
                {name: 'EOSGame.shaiZi.part3'},
                {name: 'EOSGame.shaiZi.part4'},
                {name: 'EOSGame.shaiZi.part5'},
                {name: 'EOSGame.shaiZi.part6'},
            ],
        }
    }
}

<div class = "thead">
    <span v-for = "thead in theads" :key = "thead.name">{{$t(thead.name)}}</span>
</div>  

Answer 2

data是一次性生产的，你这么写只能是在 data 初始化的时候拿到这些被国际化的值，并不能响应变化。你可以把 theads 写到 computed 里，这样就可以切了。