vue 双语言切换中，data内翻译文字不正常切换的解决方案

背景

有这么一个登录页面，相关功能如下：

1. 支持双语言，点击切换语言
2. 表单内部有一个自定义的select，里面option的label、value都是的名字由外部提供；其中预设的option的label使用this.$t(...)提供

问题

在点击切换语言的时候，页面上翻译的文件都能够正常转换、唯独预设option的label不能，如下图，在切换到英文的时候，页面中其余部分都能够转换成英文，除了选择框里面的“xx中心”

原因

data里面的数据（$t('m.txt_001')）会在created的时候根据当前语言转换成对应语言的文字(数据中心)；

点击语言切换，其它地方会正常执行翻译，而data里面的数据已经是中文了，不会再改变成英文，

=> 除非刷新页面、或者重新为data赋值

方案

1. 点击切换语言的时候，同时刷新页面，让整个页面重新加载

2. 重新为data赋值

一.

使用this.$router.go(0),或者window.reload();

但是使用该方法有一个明显的问题，那就是在手机上面会让页面产生明显的闪烁，用户体验很不好

二.

在网上看到一个销毁，重建组件的方法，有人说可以，但是在我这会产生问题。方案如下：

通过v-if来控制组件是否创建。

 <mt-popup v-model="selectboxShow" position="bottom" v-if="hackReset">
                 <mt-picker :slots="options" :showToolbar="showToolbar" valueKey="label" ref="picker" v-if="hackReset">
                     <mt-button @click="cancel">{{$t('m.btn_0004')}}</mt-button>
                     <mt-button @click="check" class="fr">{{$t('m.btn_0005')}}</mt-button>
                 </mt-picker>
             </mt-popup>

  data() {
       return {
                 hackReset: true, // 是否重建组件
     }
 }

 methods: {
    changeLangen() {
         this.changeLang("EN");
                 localStorage.setItem('language','EN')
         this.isCn = false;
         this.isEn = true;
         this.hackReset = false // 销毁组件
         this.$nextTick(() => {
                   this.hackReset = true
 })
       }
 }

上面这种做法，对于要翻译data里面数据的情况，貌似并不能起到作用，正如前面所说，在登录页面组件created的时候，data里面的数据已经固定了

那么使用v-if销毁整个登录页面组件呢？

 <template>
     <div class="login" v-if="hackReset">
         <div class="head">
             <span class="title">{{$t('m.tit_0001')}}</span>
             <img src="../../../assets/images/logo.png" />
         </div>
         <mt-popup>
             ...
         </mt-potup>
         </div>
 </template>    

这样做，我遇到的问题是：

点击切换后，hackReset设置为false，当然，当前登录组件也就被销毁。后面的切换函数里面的代码根本没有this  好嘛。白瞎忙活

这样，我就只能用重新赋值这条路了吧？

三.

因为我需要设置预设值，所以新建一个js文件，在点击时使用bus提交一个事件；在新建的js文件里监听这个事件，把data暴露出来

登录组件引入这个js文件，把js文件内的值重新赋值给data

     import { config } from '../../../assets/js/url_config.js'

 methods:{
   changeLangen() {
         this.changeLang("EN");
                 localStorage.setItem('language','EN')
         this.isCn = false;
         this.isEn = true;
                 bus.$emit('getUrlConfig',this)
                 this.options[0] = config
       }
 }

js文件

 import bus from './bus.js'
 let config = null
 bus.$on('getUrlConfig',function(vth){
     config =  { // 一个对象就是一个slot
         values: [{
                 label: vth.$t('m.txt_p_0010'),
                 value: '1'
             },
             {
                 label: vth.$t('m.txt_p_0011'),
                 value: '2'
             },
             {
                 label: vth.$t('m.txt_p_0009'),
                 value: '3'
             }
         ]
     }
 })
 export {config}

试了下，初步实现了功能，貌似还有些问题诶。

新手就只有这样了吧