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}

試了下，初步實現了功能，貌似還有些問題誒。

新手就只有這樣了吧