vue3.0处理返回值json中英文字段cn/en，实现前端语言切换

由于vue3中移除了filter，鼓励使用函数方法或者计算属性来处理原filter所做的事情，所以今天我们的目标是使用方法来处理所传的lang参数，从而实现语言切换。这里后端会一次性传给前端的name中包含cn和en字段，前端来做对应的转化处理。

在src根目录新建一个utils文件夹，新建index.js，这里我们编写lang方法，用于处理如下含有中英文的json：(目标为name字段，其下的cn和en)

{
    "data": {
        "content": [
            {
                "name": {
                    "cn": "品质",
                    "en": "Quality"
                },
                "url": "/src/assets/1.png"
            },
            {
                "name": {
                    "cn": "款式",
                    "en": "Style"
                },
                "url": "/src/assets/2.png"
            },
            {
                "name": {
                    "cn": "价格",
                    "en": "Price"
                },
                "url": "/src/assets/3.png"
            }
        ]
    }
}

index.js

let utils = {
    lang(value, lang, placeholder) {
        if (value && value[lang] && value[lang].length > 0) {
            return value[lang]
        } else if (value) {
            let others = Object.keys(value).filter(attr => attr != lang)
            if (others && others.length > 0 && value[others[0]] && value[others[0]].length > 0) {
                return value[others[0]]
            } else {
                return placeholder || ''
            }
        }
    }
}

export default utils

然后就是调用了：

import utils from '@/utils/index'
...

const { data: res } = await axios.$get(`xxxxxx`)
//这里使用了i18n，你也可以换成自己的初始lang字段，如'cn'
//作为示例数组下标挂0，正常使用应该需要循环传index过来
utils.lang(res.content[0].name, $i18n.locale)

所得结果如下：（这里在控制台中直接模拟）

 这样我们就完成了对name字段进行语言切换显示的处理。