data是一次性生产的,你这么写只能是在 data 初始化的时候拿到这些被国际化的值,并不能响应变化。官方的解决办法是,建议我们将表达式写到computed属性里,不要写到data里
<li v-for="(item, index) in stepLists">
<img :src="item.img" alt="">
<div class="img-cover">
<div class="step-title">{{$t('lang.step')}} {{index + 1}}</div>
<div class="step-dec">
{{item.stepDec}}
</div>
</div>
</li>
//js
computed: {
stepLists() {
return [
{
img: require('../assets/img/home/step1_pic.png'),
stepDec: this.$t('lang.homePage.stepLists[0]')
},
{
img: require('../assets/img/home/step2_pic.png'),
stepDec: this.$t('lang.homePage.stepLists[1]')
}
]
}
},