如何从Vue.js中的外部文件访问数据?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (49)

对于Vue.js来说还是新手,但非常乐意去了解它。在开始使用Axios和Vuex商店之前,我想了解如何将一些测试数据从单独的文件发送到我的组件?希望有人能提供帮助。

如果我在我的组件中执行此操作它:

<script>

export default {
    data () {
        return {
        logItems: [
            { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
        }
    }
}

但我假设我可以从外部文件中导入如下:

import logs from '~/components/testdata.vue'
export default {
    data () {
        return {
        logitems: logs
        }
    }
}

在我的testdate.vue文件中,我有:

<script>
export default {
    data () {
        return {

        // Dummy Test Data
        logs: [
            { log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
        }
        return logs
    }
}

有人能够告诉我我做错了什么以及为什么把我的数据放到一个单独的文件中不起作用,拜托?

非常感谢。

提问于
用户回答回答于

导入任何文件时,webpack使用适当的loader(在您指定的webpack.config.js)中构建文件。如果它是一个.vue文件,它用于vue-loader构建文件并返回一个Vue组件。您需要一个包含数据的数组,而不是一个vue组件。您可以为此导入简单.js.json文件。

而不是导入.vue文件。你可以导入.json.js归档。

data.js

const data = [{ log1d: 1, logDetail: 'This is some log detail for log 1', logType: 'general', createdBy: 'name', CreatedAt: 'date' },
            { log1d: 2, logDetail: 'This is some log detail for log 2', logType: 'general', createdBy: 'name2', CreatedAt: 'date2' },
            { log1d: 3, logDetail: 'This is some log detail for log 3', logType: 'general', createdBy: 'name3', CreatedAt: 'date3' },
            { log1d: 4, logDetail: 'This is some log detail for log 4', logType: 'general', createdBy: 'name4', CreatedAt: 'date4' }
            ]
export default data;

component.vue

import logs from 'data.js'
export default {
    data () {
        return {
        logitems: logs
        }
    }
}
用户回答回答于

解释相关

如果您使用的是Vue模板文件,则可以像使用HTML页面中的任何其他脚本一样使用脚本标记src的属性。

例如,由于Webpack在导入Vue模板文件时会做一些特殊的事情example.vue,所以你必须执行你的配置来提取JavaScript部分,这部分不应该被编译vue-loader

index.vue

<template><!-- ... --></template>
<script src='index.js'></script>
<style scoped>/* ... */</style>

index.js

export default {
  data() {
    return {
      //...
    };
  }
};

something.js

import stuff from '../stuff/index.js';

export default {
  data() {
    return ...stuff.data();
  }
};

在线示例

外部资源

请参阅关注点分离

扫码关注云+社区

领取腾讯云代金券