How to access data from outside the instance in Vue js?

Question

I'd like to get access to vm data from outside the instance like so:

myComponent.vue

export default {
    data() {
        return {
            name: 'Joe'
        };
    }
}

main.js

var vm = new Vue({
    el: '#app',
    render: h => h(myComponent)
});

Desired Result

console.log(vm.name);   // should return - Joe

For some reason, console returns undefined. What I'm doing wrong?

To add to the above, if I console.log(vm), it returns an object with all parameters just fine. But inside the object $data: (...) parameter doesn't have any data — Armand
– Armand, Commented Jul 16, 2019 at 12:54
vm.name is data of root component, not myApp.vue component. — ittus
– ittus, Commented Jul 16, 2019 at 13:51
in main.js: import myApp from './myApp'; and then use it in the example above — Armand
– Armand, Commented Jul 16, 2019 at 14:05

Sabee · Accepted Answer · 2019-07-16 13:10:49Z

9

To access vue.js object datas from inside you can use $property_name. Example

var vm = new Vue({
    el: '#app',
    data() {
      return {
        name: "Kapucni",
      }
    },
  template: '<div>{{ name }}</div>'
});

// use $name .property
console.log(vm.$data.name);
console.log(vm.$el);
// calling functions from $method, etc ...

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

<div id='app'>
  
</div>

answered Jul 16, 2019 at 13:10

Sabee

1,81111 silver badges20 bronze badges

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

4 Comments

Armand Over a year ago

Hmm... for some reason this didn't work for me either. I'm using vue-cli and webpack, maybe some behaviour is different in this environment... $data object doesn't return anything

Sabee Over a year ago

maybe upload your minimal project with settings to codesandbox

Sabee Over a year ago

For example from console in my Nuxt + Vue project I can access the data like app.__vue__.$root.$data, where $root is my component name

Michael Harper Over a year ago

thanks for this - I'm using vue via script and lost the vue context in an axios catch block for some reason

Armand · Accepted Answer · 2019-07-16 14:14:34Z

2

Thanks to comments from ittus, I realised that I have to look for child components, not the root component.

We can get to child component like so:

vm.$children[0].name

where $children[0] is a direct (and first in this case) child of the root component.

answered Jul 16, 2019 at 14:14

Armand

2,8672 gold badges28 silver badges39 bronze badges

1 Comment

Huy Phạm Over a year ago

Update; In 2022, $children has been removed from Vue 3. Just in case someone still looking for a solution, visiting Vue 3 how to get information about $children may help.

Антон Баранов · Accepted Answer · 2023-08-30 06:59:15Z

Best practices are using State in Vuex for unified data storage and secure and standardized data modification and retrieval. You can read more here: https://v3.vuex.vuejs.org/#what-is-a-state-management-pattern.

If you using State in Vuex and Vue 3 you can:

store.js

import 'es6-promise/auto';
import {createStore} from 'vuex'

export const store = createStore({
    state () {
        return {
            count: 1,
        }
    },
    mutations: {
        incrementCount (state) {
            state.count++
        },
        setCount (state, newValue) {
            state.count = newValue;
        },
    },
    getters: {
        getCount: state => {
            return '*' + state.count + '*';
        }
    }
})

app.js

import {store} from "./store"; 
const app = createApp({...})
app.use(store);
export const vue_app = app.mount('#vue_app');

and in Javascript to modify:

const store = vue_app.__vue_app__._context.provides.store; // Store instance
store._state.data.count; // get value
store.getters.getCount; // get value by the getter
store._mutations.incrementCount[0](); // modification by the mutation "incrementCount"
store._mutations.setCount[0](123); // modification by the mutation "setCount"
store._state.data.count = 123; // direct modification

Sara · Accepted Answer · 2023-09-20 12:09:11Z

0

I had a similar problem and I was able to access the data using vm._data.name

answered Sep 20, 2023 at 12:09

Sara

5191 gold badge6 silver badges10 bronze badges

Collectives™ on Stack Overflow

How to access data from outside the instance in Vue js?

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related