Vue JS如何在腳本中訪問數據變量

Question

我是vue.js的新手。 我正在使用2.5.13版本。

我正在嘗試訪問組件文件腳本中的data變量。 但這給了我一個undefined信息。

組件中的id屬性返回正確的值，但是在腳本內部，它將返回undefined 。

如果要使用該變量，該怎么辦？

以下是我的app.js代碼

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

bleow是我的App組件代碼

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

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

Answer 1

將變量var app = new Vue({..})分配給您的Vue應用。 並通過使用appname.variable_name例如app.message在vue app外部訪問變量

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

 <script src="https://cdn.jsdelivr.net/npm/vue"></script> <div id="app"> {{ message }} </div>