Problems to render Vue.js main.js

Question

I’m new to Vue and I need to maintain a project.. the problem is this: I have in main.js the route scheme..

main.js

import Vue from 'vue'

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

page.

<span>{{ message }}</span>

I happen to be trying to display the "message" that is on date in an external template.. that is in the folder address ".. /pages/page.Vue"; more when I put {{ message }} returns me the following error:

[Vue warn]: Property or method "message" is not defined on the instance but referenced During render. Make sure to declare reactive data properties in the data option.

Thank you!

Answer 1

From what I understand, you’re trying to access a property of data, in case the message who is in his main.js in a component page.vue.

If so, this will not work. You should have this variable inside the data() of the component page.vue. Check the example below:

page.

<template>
  <div>
    <span>{{ message }}</span>
  </div>
</template>

<script>
export default {
  name: 'page',
  data () {
    return {
      message: 'Hello Vue!'
    }
  }
}
</script>

Another way to do it is a way that I don’t particularly recommend, but you will be able to access the variable message of the Vue instance with the this.$root. Check the example below:

App.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  mounted () {
    console.log(this.$root.message)
  }
}
</script>