Vue组件引入外部js文件导出数据时logitems1无法访问如何解决

你在data.js中导出的是一个包含data方法的普通JS对象，它不是Vue组件，Vue不会自动调用这个data方法初始化数据。你直接访问logs.data.infomation时，拿到的是data这个函数本身，不是函数执行后返回的内部数据对象，自然读不到log1d这类属性。

根据你的使用场景选对应方案即可：

方案1：直接导出静态数据（推荐，适合固定共享数据场景） #

如果data.js只是用来存固定的、不需要每次生成独立副本的公共数据，不需要套data方法，直接导出数据对象即可。
修改后的data.js代码：

// data.js
export default {
  infomation: {
    log1d: 1,
    logDetail: "This is some log detail for log 1",
    logType: "general",
    createdBy: "name",
    CreatedAt: "date",
  }
}

组件中引入时直接读取对应属性赋值：

// Test.vue script部分
import logs from './data.js'
export default {
  data () {
    return {
      logitems1: logs.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) // 正常输出1
       console.log(this.logitems2.log1d) // 正常输出1
    }
  }
}

方案2：保留函数写法（适合需要独立数据副本的场景） #

如果你需要每次引入数据时都生成一份独立的副本，避免多个组件修改同一份引用数据导致互相影响，可以保留原data.js的函数写法，但引入后需要手动执行函数拿到返回值。
data.js保持原有代码不变，修改Test.vue的赋值逻辑：

// Test.vue script部分
import logs from './data.js'
export default {
  data () {
    // 手动调用data方法，拿到方法返回的数据对象
    const jsFileData = logs.data()
    return {
      logitems1: jsFileData.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) // 正常输出1
       console.log(this.logitems2.log1d) // 正常输出1
    }
  }
}

补充提示：你代码里的infomation属于拼写错误，正确拼写为information，虽然不影响当前运行，但后续维护容易因为拼写不一致出现取值问题，建议修正。

内容的提问来源于stack exchange，提问作者Metalzone Rockneverdie