Question

我正在尝试从对象中的值（国家/地区代码）获取国家/地区标签（名称）。

在Vue.js中，我正在尝试构建一个计算属性，以根据API请求中的国家/地区代码返回国家/地区的名称。

在模板中：

countryLabel () {
    var countries = require('../../plugins/countries')
    var countryCode = this.content.country
    function getLabelByValue(countries, countryCode) {
        return Object.keys(countries).find(label => countries[value] === countryCode)
    }
}

来自国家/地区列表：

module.exports = [
    { value: 'AF', label: 'Afghanistan' },
    { value: 'AX', label: 'Aland Islands' },
    { value: 'AL', label: 'Albania' },
    { value: 'DZ', label: 'Algeria' },
    { value: 'AS', label: 'American Samoa' },
    { value: 'AD', label: 'Andorra' },
    { value: 'AO', label: 'Angola' },
    { value: 'AI', label: 'Anguilla' },
    { value: 'AQ', label: 'Antarctica' },
    { value: 'AG', label: 'Antigua and Barbuda' },
    ...
]

Answer 1

您可能不希望在阵列上调用Object.keys。

这样的事情可能更符合您的要求：

function getLabelByValue(countries, countryCode) {
    const entry = countries.find(item => item.value === countryCode);
    return entry ? entry.label : null;
}

问题是在数组上调用Object.keys将返回一个已转换为字符串的数字数组：

> console.log(Object.keys(['this', 'is', 'an', 'array']));
['0', '1', '2', '3']

由于您的exports已经是一个数组，因此您可以直接在其上调用find()。

Answer 2

更好的方法是使用一个对象，这是在javascript中查找任何内容的最快方法，因为对象是字典。因此，如果您将导出更改为： { AF: 'Afghanistan', AX: 'Aland Islands', etc... } 然后，您可以通过countries[countryCode]进行即时查找。

Answer 3

根据rossipedia的回答，这对我有用：

countryLabel () {
    const countries = require('../../plugins/countries')
    return countries.find(item => item.value === this.content.country).label
}

尝试从Javascript中的键获取对象值

3 个答案: