How do I access data from a js file?

Question

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.

Kaneki21 · Accepted Answer · 2022-07-10 03:39:28Z

1

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)

edited Jul 10, 2022 at 3:39

answered Jul 10, 2022 at 3:34

Kaneki21

1,4222 gold badges7 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Metalzone Rockneverdie Over a year ago

thanks for the answer I had to run it like this because data.js was not created by me. Just a caller

Kaneki21 Over a year ago

Sure. Since you are using Vue, you can also try to get the initial data in the created hook.

Metalzone Rockneverdie Over a year ago

Let me ask you some more. How can I change data in js file from test.vue?

Kaneki21 Over a year ago

add a function in the js file(return the updated data object) and call that from .vue file

Kaneki21 Over a year ago

@MetalzoneRockneverdie if you want to maintain the state try using Vuex or Pinia. That'll be better option.

|

Collectives™ on Stack Overflow

How do I access data from a js file?

1 Answer 1

7 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Related