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

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

$t('common.id')

标签的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}`)"

 

你可能感兴趣的:(前端框架)