VUE003. 解決data中使用vue-i18n不更新視圖問題（computed屬性）

案例

在國際化開發中，有一部分需要國際化的文字是由數據驅動的儲存在data中，然而VUE的data存在很多無法實時更新視圖的問題，比如v-for循環的標簽，當數據層次過深，通過源數據數組的索引改變它的值是無法實時更新到視圖上的。

這個問題可以用 vue.js 提供的 this.$set( ) 或者 vm.$forceUpdate 方法解決。前者向響應式對象中添加一個 property 並確保這個新 property 同樣是響應式的，且觸發視圖更新。后者則是強制渲染視圖。

本文介紹用computed屬性解決 vue-i18n 不更新視圖的問題。

問題代碼

data() {
  return {
    label: i18n.t(key)
    // 此處vm.$t(key)亦可
    }
  }
}

解決方法

data(){
    return {}
}

computed: {
    label() {
        return i18n.t(key)
    }
}

擴展知識 - computed屬性

在computed屬性中，它之所以處理起來很快，正是因為它返回的屬性數據結構簡單。

個人理解它不應該包含 DOM操作、修改外部變量、異步操作 ，如果想解決這個問題，還需要另外定義一個函數來儲存這個操作，再使用computed屬性中定義的函數去調用它：

computed: {
    dataSource() {
        return [
            label: i18nt(key)
            click: () => {
                this.someThing()
            }
        ]
    }
}

methods: {
    someThing() {
        this.$router.push({ name: 'HomePage' })
    }
}

如果在computed屬性中直接定義click的事件為 $router.push( ) ，將會出現報錯，於是應該用以上的方法解決。

直接改變外部變量同樣報錯：

- END -