对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
}
}
有人能告诉我我做错了什么吗?为什么把我的数据放到一个单独的文件中不起作用?
非常感谢。
发布于 2018-06-06 18:30:10
解释
如果您使用的是Vue模板文件,则可以像通常处理HTML页面中的任何其他脚本一样使用脚本标记src的属性。
因为当你导入一个Vue模板文件时,Webpack正在做一些特殊的事情,例如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();
}
};
在线示例
外部资源
https://stackoverflow.com/questions/50715823
复制相似问题