Problems rendering main.js of Vue.js

Question

Problems rendering main.js of Vue.js

Navigation

#1 by (1 votes)

0

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

main.js

import Vue from 'vue'

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

page.vue

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

I happen to be trying to display the "message" that is on the date in an external template .. which is in the folder address "../pages/page.vue"; but when I put {{message}} I get 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!

javascript vue.js

asked by anonymous 17.05.2018 / 16:59

1 answer

Check how many Products were sold in the year 2017 Add the first "n" elements of a geometric progression in Python

score 1 · Accepted Answer

As far as I understand, you are trying to access a property of data , in this case the message that is in its main.js in a page.vue component.

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

page.vue

<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 I particularly do not recommend, but you will be able to access the variable message of the Vue instance with this.$root . Check the example below:

App.vue

<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>