Vue国际化与过滤器使用踩坑记录

国际化标准的$t关键字在模板中使用时，可以省去this，直接在双花括号（{{ }}}）和v-bind后面的双引号中进行使用

$t('common.id')

在<sctipt>标签的methods中使用时则需要this

this.$t('common.id')

这两处的this均指向当前组件对象，而在filter中的this会指向window，因此在过滤器函数中无法直接使用国际化关键字，需要在过滤器使用时将this作为参数传入才可以使用

id | idFilter | i18nFilter(this, 'common')

...

filters: {
    i18nFilter(value, that, module) {
        return that.$t(`${module}.${value}`)
    }
},

另外，过滤器必须在v-bind的双引号或双花括号中独立使用，在过滤器外包裹括号等操作均会使其无法正常发挥作用

// 正确使用
:value="id | idFilter | i18nFilter(this, 'common')"

// 错误使用
:value="$t(`common.${id}`)"