javascript - Vue JS how to access data variable in script - Stack Overflow

admin管理员组

文章数量:1345179

I am new to vue.js. and i am using 2.5.13 version.

I'm trying to access my data variable in ponent file script. But this give to me a undefined message.

Id attribute in the ponent returns correct value, but inside script, it would return undefined.

If I want to use that variable, what do I need to do?

Below is my app.js code

import App from './ponents/App.vue';
new Vue(Vue.util.extend({
        router,
        data : {
            test : 1
        },
    }, App))
        .$mount('#root');

And bleow is my App ponent code

<template>
    <div id="app" :data-id="test">

    </div>
</template>
<script>
    console.log(this.data);
</script>

I am new to vue.js. and i am using 2.5.13 version.

I'm trying to access my data variable in ponent file script. But this give to me a undefined message.

Id attribute in the ponent returns correct value, but inside script, it would return undefined.

If I want to use that variable, what do I need to do?

Below is my app.js code

import App from './ponents/App.vue';
new Vue(Vue.util.extend({
        router,
        data : {
            test : 1
        },
    }, App))
        .$mount('#root');

And bleow is my App ponent code

<template>
    <div id="app" :data-id="test">

    </div>
</template>
<script>
    console.log(this.data);
</script>

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Feb 1, 2018 at 7:39 Hax0r asked Feb 1, 2018 at 7:33 Hax0rHax0r 1,82344 gold badges2929 silver badges4444 bronze badges 2

• 2 The code looks strange for me not sure where to start. I suggest you to learn basic VueJS from this free course laracasts./series/learn-vue-2-step-by-step. An hour of taking this course would give you enough idea to start with VueJS in the proper manner. :) – spicydog Commented Feb 1, 2018 at 7:44
• thanks ! spicydog ^^ – Hax0r Commented Feb 1, 2018 at 8:06

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

assign variable var app = new Vue({..}) to your Vue App. and access variable outside vue app by using appname.variable_name like app.message

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})


console.log(app.message);

<script src="https://cdn.jsdelivr/npm/vue"></script>


<div id="app">
  {{ message }}
</div>

本文标签： javascriptVue JS how to access data variable in scriptStack Overflow