Test.vue
<template>
<div>
<button @click="test()">test</button>
</div>
</template>
<script>
import logs from './data.js'
export default {
data () {
return {
logitems1: logs.data.infomation,
logitems2:
{
log1d: 1,
logDetail: "This is some log detail for log 1",
logType: "general",
createdBy: "name",
CreatedAt: "date",
},
}
},
methods:{
test(){
console.log(this.logitems1.log1d)
console.log(this.logitems2.log1d)
}
}
}
</script>
data.js
export default {
data() {
return {
infomation: {
log1d: 1,
logDetail: "This is some log detail for log 1",
logType: "general",
createdBy: "name",
CreatedAt: "date",
},
};
},
};
Access to logitems2 is possible but I can't access the data in logitems1, which has all the same information. I'm trying to access data from files other than components, which I can't figure out how to access.
You have to make a functional call.
<script>
import logs from './data.js'
export default {
data () {
return {
logitems1: logs.data().infomation,
logitems2:
{
log1d: 1,
logDetail: "This is some log detail for log 1",
logType: "general",
createdBy: "name",
CreatedAt: "date",
},
}
},
methods:{
test(){
console.log(this.logitems1.log1d)
console.log(this.logitems2.log1d)
}
}
}
</script>
But if you just only want the data to be available exporting the object from js file without function would be better approach.
logdata.js
export default logInformation{
log1d: 1,
logDetail: "This is some log detail for log 1",
logType: "general",
createdBy: "name",
CreatedAt: "date",
}
and then directly use as
import logInformation from "logdata.js"
console.log(logInformation)