VueJS data() not working

Question

I am trying to make a VueJS app but I am failing even with the simplest examples. I am using Laravel 5.3 with pre-built support for VueJS (version 1, I tried version 2 as well).

Here is my Example.vue component

<template>
    <div class="profile">
        {{ name }}
    </div>
</template>

<script>
    export default {
        data () {
            return {
                name: 'John Doe'
            }
        }
    }
</script>

And here is the main code

Vue.component('example', require('./components/Example.vue'));

const app = new Vue({
    el: '#app'
});

This is the error that shows up everytime in console:

[Vue warn]: Property or method "name" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in component )

Any ideas whats wrong? Thanks

Skysplit · Accepted Answer · 2016-10-08 22:34:10Z

2

In your script tags instead of export default use:

module.exports = {
  data() {
    return { counter: 1 }
  }
}

This should work for you

answered Oct 8, 2016 at 22:34

Skysplit

1,93312 silver badges16 bronze badges

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

Comments

François Romain · Accepted Answer · 2016-10-08 18:01:18Z

1

Call the component inside your template

Vue.component('example', {
  template: `<div class="profile">{{ name }}</div>`,
  data () {
return {
  name: 'John Doe'
}
  }
})

const app = new Vue({
  el: '#app'
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app"><example></example></div>

answered Oct 8, 2016 at 18:01

François Romain

14.5k17 gold badges95 silver badges128 bronze badges

6 Comments

m_pro_m Over a year ago

Yeah, it works this way. But I would really like to use 'single file component'

François Romain Over a year ago

this is exactly the same, no? import the single file component and replace the components options with your imported component name

m_pro_m Over a year ago

Well, no. This is what I am trying to achieve, and this is what you showed me. It's not much of a difference but you know, details matter :D

François Romain Over a year ago

are you using webpack or browserify?

m_pro_m Over a year ago

Yes, Laravel has got all of this prepared

|

anova01 · Accepted Answer · 2021-01-08 02:48:58Z

0

The problem is that you are trying to load the component 'example' from that file but you didn't give a name to it. You should use:

<script>
   export default {
     name: 'example',
     data() {
       return {
         name: 'John Doe'
       }
     }
   }
</script>

Or load the component the following way (not sure if extension .vue is needed):

require('./exmaple').default();

If you are using Babel you can also load the components without giving them a name using this syntax:

import Example from ./example

Also checkout this post to get some more info in case you use Babel

edited Jan 8, 2021 at 2:48

anova01

911 silver badge10 bronze badges

answered Oct 18, 2016 at 14:24

ragnar

1,30211 silver badges18 bronze badges

Collectives™ on Stack Overflow

VueJS data() not working

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related