无法从main.js文件外部访问vuejs示例变量

zxlwwiss 于 2021-09-23 发布在 Java

关注(0)|答案(2)|浏览(396)

我有一个保存为配置文件的国家/地区列表 country_list . 该文件包含以下内容。

export default {
      countries: [
        'AUSTRALIA',
        'AUSTRIA',
        'BELGIUM',
        'BRAZIL',
        'BULGARIA',
        'CANADA',
        'CHINA',
        'CROATIA',
        'CYPRUS',
        'CZECHIA',
        'DENMARK',
        'ESTONIA',
        'FINLAND'
    ]
}

现在在 main.js 我正在导入它并将其设置为示例变量

import countryList from './config/country_list';

Vue.prototype['$countryData'] = countryList;

现在我尝试访问这个变量 $countries 在一个名为 utils.js 例如：

export const checkCountryIncluded = (country) => {

    const countries = this.$countryData.countries;

    return countries.includes(country);
}

还有这个 checkCountryIncluded 从组件调用。
但这里我得到了一个错误 Uncaught TypeError: Cannot read property 'countries' of undefined 我是vuejs的新手，如果有人能指出这里缺少什么，这将非常有帮助。

vue.js JavaScript vue-component

来源：https://stackoverflow.com/questions/68314602/cannot-access-vuejs-instance-variable-from-outside-main-js-file

2条答案

按热度按时间

ldioqlga1#

在单独的文件（如UTIL）中，vue示例不可用，它仅在组件层次结构中可用，解决方案是在调用实用程序函数时将该全局数据作为参数传递：

this.isCountryIncluded = checkCountryIncluded(this.$countryData,this.country)

utils.js：

export const checkCountryIncluded = (countryData,country) => {

    const countries = countryData.countries;

    return countries.includes(country);
}

赞(0）回复(0）举报 2021-09-23

dzhpxtsq2#

你可以打电话 checkCountryIncluded 使用组件上下文。

this.isCountryIncluded = checkCountryIncluded.apply(this, [this.country])

要使其正常工作，函数应为普通函数（非箭头），因为您无法更改箭头函数的上下文。

export const checkCountryIncluded = function(country) {

    const countries = this.$countryData.countries;

    return countries.includes(country);
}

赞(0）回复(0）举报 2021-09-23

我来回答

无法从main.js文件外部访问vuejs示例变量

2条答案

相关问题

热门标签

最新问答