178

The following code has been written to handle an event after a button click

var MainTable = Vue.extend({
  template: "<ul>" +
    "<li v-for='(set,index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  data: function() {
    return data;
  }
});

Vue.component("main-table", MainTable);

data.settingsSelected = {};
var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

But the following error occurred:

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

1
  • Your component does not have access to methods defined on your Vue. You need to add the method changeSetting to the MainTable component.
    – Bert
    Mar 20, 2017 at 17:13

27 Answers 27

140

Problem

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

The error is occurring because the changeSetting method is being referenced in the MainTable component here:

    "<button @click='changeSetting(index)'> Info </button>" +

However the changeSetting method is not defined in the MainTable component. It is being defined in the root component here:

var app = new Vue({
  el: "#settings",
  data: data,
  methods: {
    changeSetting: function(index) {
      data.settingsSelected = data.settings[index];
    }
  }
});

What needs to be remembered is that properties and methods can only be referenced in the scope where they are defined.

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

You can read more about component compilation scope in Vue's documentation.

What can I do about it?

So far there has been a lot of talk about defining things in the correct scope so the fix is just to move the changeSetting definition into the MainTable component?

It seems that simple but here's what I recommend.

You'd probably want your MainTable component to be a dumb/presentational component. (Here is something to read if you don't know what it is but a tl;dr is that the component is just responsible for rendering something – no logic). The smart/container element is responsible for the logic – in the example given in your question the root component would be the smart/container component. With this architecture you can use Vue's parent-child communication methods for the components to interact. You pass down the data for MainTable via props and emit user actions from MainTable to its parent via events. It might look something like this:

Vue.component('main-table', {
  template: "<ul>" +
    "<li v-for='(set, index) in settings'>" +
    "{{index}}) " +
    "{{set.title}}" +
    "<button @click='changeSetting(index)'> Info </button>" +
    "</li>" +
    "</ul>",
  props: ['settings'],
  methods: {
    changeSetting(value) {
      this.$emit('change', value);
    },
  },
});


var app = new Vue({
  el: '#settings',
  template: '<main-table :settings="data.settings" @change="changeSetting"></main-table>',
  data: data,
  methods: {
    changeSetting(value) {
      // Handle changeSetting
    },
  },
}),

The above should be enough to give you a good idea of what to do and kickstart resolving your issue.

4
  • 4
    Is this the most preferred approach currently? Things keep evolving a lot in Vue so I though I would ask
    – Aseem
    Mar 15, 2019 at 17:07
  • I'm no expert in Vue, but stackoverflow.com/questions/43292810/… suggests you can call app's function from your component via $root. E.g. this.$root.changeSetting(value) directly from component's changeSetting(..) in this case. Looks more convenient to me... Jan 2, 2021 at 17:31
  • 1
    @Aseem: separating concerns of code to make things easier to understand and change is timeless. The method described in the answer separates the concern of data and the concern of presenting that data and is just one example of how things might be done. I would not evaluate the approach as to if it is 'current' but whether it makes code easier to change and understand.
    – Wing
    Jan 3, 2021 at 19:25
  • 1
    @FlasHfromRu: You can reference things from $root but in general it is not a good idea. See this note on accessing root instances from Vue's documentation: "This can be convenient for demos or very small apps with a handful of components. However, the pattern does not scale well to medium or large-scale applications, so we strongly recommend using Vuex to manage state in most cases."
    – Wing
    Jan 3, 2021 at 19:27
54

Should anybody land with the same silly problem I had, make sure your component has the 'data' property spelled correctly. (eg. data, and not date)

<template>
  <span>{{name}}</span>
</template>

<script>
export default {
name: "MyComponent",
data() {
  return {
    name: ""
  };
}
</script>
12
  • 14
    Me here in 2020, I wrote DATE
    – Paaksing
    Jul 13, 2020 at 20:24
  • 4
    lmfao this comment just saved me Sep 30, 2020 at 0:32
  • 1
    Should anybody land with the same silly problem I had, make sure your component has the 'data' property spelled correctly. Lol really a very siilly problem :) thanks man
    – TarangP
    Jan 8, 2021 at 10:12
  • 1
    This comment saved me! I had "computed" defined within with the "data" property.
    – JohnP
    Mar 14, 2021 at 22:23
  • 1
    Vue would be do much better without all of these gotchas...
    – Luca P.
    Apr 12, 2022 at 22:45
35

In my case the reason was, I only forgot the closing

</script>

tag.

But that caused the same error message.

6
  • 2
    Dude... that was it! I would have never found this.
    – KyleFarris
    Dec 1, 2020 at 22:15
  • Unexpected, my some hours error is this one :)
    – Osify
    Feb 27, 2021 at 18:18
  • 1
    Thank you. I looked all over before finding this solution. Nov 2, 2021 at 14:49
  • Already lost 15 mins on this, and I have no idea how much more time you just saved me!
    – Marc Gouw
    Jun 22, 2022 at 9:02
  • two hours for me on this one... thanks mate I thought I was losing my mind lmao
    – onesc
    Jul 3, 2022 at 15:06
11

If you're experiencing this problem, check to make sure you don't have

methods: {
...
}

or

computed: {
...
}

declared twice

3
  • Holy moly! I got this and I didn't know it Jun 1, 2021 at 9:29
  • thank you! I've been freaking out on this!
    – Bar Horing
    Dec 23, 2021 at 15:47
  • Typo'ing method is a classic one too.
    – kissu
    Oct 20, 2022 at 9:44
8

It's probably caused by spelling error

I got a typo at script closing tag

</sscript>
1
  • This or bad naming convention: I had the error trying to call fileList but the data property was filelist.
    – smonff
    Jan 5, 2022 at 11:18
7

Remember to return the property

Another reason of seeing the Property "search" was accessed during render but is not defined on instance is when you forget to return the variable in the setup(){} function

So remember to add the return statement at the end:

export default {

  setup(){

    const search = ref('')
    //Whatever code

    return {search}

  }
}

Note: I'm using the Composition API

5

Adding my bit as well, should anybody struggle like me, notice that methods is a case-sensitive word:

<template>
    <span>{{name}}</span>
</template>

<script>
export default {
  name: "MyComponent",
  Methods: {
      name() {return '';}
  }
</script>

'Methods' should be 'methods'

2
  • 1
    in my case, I had method LOL Dec 22, 2020 at 23:03
  • 1
    Same here, I had "method" instead of "methods". It would be good if Vue or linters can pick this up at compile time.
    – henrykodev
    Sep 17, 2021 at 10:33
4

If you use two times vue instance. Then it will give you this error. For example in app.js and your own script tag in view file. Just use one time

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

I got this error when I tried assigning a component property to a state property during instantiation

export default {
 props: ['value1'],
 data() {
  return {
   value2: this.value1 // throws the error
   }
  }, 
 created(){
  this.value2 = this.value1 // safe
 }
}
1
  • if you don't have any typo this is the best anwer!
    – Lepy
    Mar 3, 2022 at 13:03
4

My issue was I was placing the methods inside my data object. just format it like this and it'll work nicely.

<script>
module.exports = {
    data: () => {
        return {
            name: ""
        }
    },
    methods: {
        myFunc() {
            // code
        }
    }
}
</script>
3

In my case, I wrote it as "method" instead of "methods". So stupid. Wasted around 1 hour.

2
  • Thank you so much for this! This was driving me insane.
    – Isy
    Aug 23, 2021 at 19:18
  • I wrote date() instead of data() Sep 19, 2021 at 17:48
3

Some common cases of this error

  • Make sure your component has the data property spelled correctly
  • Make sure your template is bot defined within another component’s template.
  • Make sure you defined the variable inside data object
  • Make sure your router name in string

Get some more sollution

2
  • Nice summary! Also double check the function name matches: :class="boxAClasses" vs boxAclasses() { … } Jul 18, 2022 at 20:24
  • "Make sure your template is bot defined within" ... did you mean "NOT defined within"?
    – jason44107
    Oct 20, 2022 at 15:37
2

It is most likely a spelling error of reserved vuejs variables. I got here because I misspelled computed: and vuejs would not recognize my computed property variables. So if you have an error like this, check your spelling first!

2

I had two methods: in the <script>, goes to show, that you can spend hours looking for something that was such a simple mistake.

2

if you have any props or imported variables (from external .js file) make sure to set them properly using created like this;

make sure to init those vars:

import { var1, var2} from './constants'

//or

export default {
     data(){
      return {
       var1: 0,
       var2: 0,
       var3: 0,
      },
    },
    props: ['var3'],
    created(){
     this.var1 = var1;
     this.var2 = var2;
     this.var3 = var3;
     }
    
1

In my case it was a property that gave me the error, the correct writing and still gave me the error in the console. I searched so much and nothing worked for me, until I gave him Ctrl + F5 and Voilá! error was removed. :'v

1

Look twice the warning : Property _____ was accessed during render but is not defined on instance. So you have to define it ... in the data function for example which commonly instantiate variables in a Vuejs app. and, it was my case and that way the problem has been fixed. That's all folk's !

1

In my case, I forgot to add the return keyword:

computed: {
    image(){
        this.productVariants[this.selectedVariant].image;
    },
    inStock(){
       this.productVariants[this.selectedVariant].quantity;
    }
}

Change to:

computed: {
    image(){
        return this.productVariants[this.selectedVariant].image;
    },
    inStock(){
       return this.productVariants[this.selectedVariant].quantity;
    }
}

0

In my case due to router name not in string:

:to="{name: route-name, params: {id:data.id}}"

change to router name in string:

:to="{name: 'router-name', params: {id:data.id}}"
0

In my case I was trying to pass a hard coded text value to another component with:

 ChildComponent(:displayMode="formMode")

when it should be:

ChildComponent(:displayMode="'formMode'")

note the single quotes to indicate text instead of calling a local var inside the component.

1
  • 1
    If you want to pass String value to component then you could do it like this displayMode="formMode". Note: We are not binding using v-bind and therefore displayMode will store String value Dec 16, 2021 at 7:12
0

If you're using the Vue3 <script setup> style, make sure you've actually specified setup in the opening script tag:

<script setup>

I had lapsed into old habits and only created a block with <script>, but it took a while to notice it.

https://v3.vuejs.org/api/sfc-script-setup.html

0

Although some answers here maybe great, none helped my case (which is very similar to OP's error message).

This error needed fixing because even though my components rendered with their data (pulled from API), when deployed to firebase hosting, it did not render some of my components (the components that rely on data).

To fix it (and given you followed the suggestions in the accepted answer), in the Parent component (the ones pulling data and passing to child component), I did:

// pulled data in this life cycle hook, saving it to my store
created() {
  FetchData.getProfile()
    .then(myProfile => {
      const mp = myProfile.data;
      console.log(mp)
      this.$store.dispatch('dispatchMyProfile', mp)
      this.propsToPass = mp;
    })
    .catch(error => {
      console.log('There was an error:', error.response)
    })
}
// called my store here
computed: {
    menu() {
        return this.$store.state['myProfile'].profile
    }
},

// then in my template, I pass this "menu" method in child component
 <LeftPanel :data="menu" />

This cleared that error away. I deployed it again to firebase hosting, and voila!

Hope this bit helps you.

1
  • 2
    Pardon my being picky (I am French): "and voilà!"
    – cthiebaud
    Aug 13, 2021 at 12:51
0

It seems there are many scenarios that can trigger this error. Here's another one which I just resolved.

I had the variable actionRequiredCount declared in the data section, but I failed to capitalize the C in Count when passing the variable as a params to a component.

Here the variable is correct:

data: () => {
     return{
       actionRequiredCount: ''
     }
}

In my template it was incorrect (notd the no caps c in "count"):

  <MyCustomModule :actionRequiredCount="actionRequiredcount"/>

Hope this helps someone.

0

Most people do have an error here because of:

  • a typo or something that they forgot to declare/use
  • the opposite, did it in several places

To avoid the typo issues, I recommend always using Vue VSCode Snippets so that you don't write anything by hand by rather use vbase, vdata, vmethod and get those parts generated for you.
Here are the ones for Vue3.
You can of course also create your own snippets by doing the following.

Also make sure that you're properly writing all the correct names as shown here, here is a list:

  • data
  • props
  • computed
  • methods
  • watch
  • emits
  • expose

As for the second part, I usually recommend either searching the given keyword in your codebase. So like cmd + f + changeSetting in OP's case to see if it's missing a declaration somewhere in data, methods or alike.

Or even better, use an ESlint configuration so that you will be warned in case you have any kind of issues in your codebase.
Here is how to achieve such setup with a Nuxt project + ESlint + Prettier for the most efficient way to prevent bad practices while still getting a fast formatting!

0

One other common scenario is:

  • You have a component (child) extending another component (parent)
  • You have a property or a method xyz defined under methods or computed on the parent component.
  • Your are trying to use parent's xyz, but your child component defines its own methods or computed

Sample code with the problem

// PARENT COMPONENT
export default {
  computed() {
    abc() {},
    xyz() {} // <= needs to be used in child component
  },
  ...
}

// CHILD COMPONENT
export default {
  extends: myParentComponent,
  computed() {
    childProprty1() {},
    childProprty2() {}
  }
}

The solution

In this case you will need to redefine your xyz computed property under computed

Solution 1:

Redefine xyz and copy the code from the parent component

// CHILD COMPONENT
export default {
  extends: myParentComponent,
  computed() {
    xyz() {
      // do something cool!
    },
    childProprty1() {},
    childProprty2() {}
  }
}
Solution 2

Redefine xyz property reusing parent component code (no code redundancy)

// CHILD COMPONENT
export default {
  extends: myParentComponent,
  computed() {
    xyz() {
      return this.$parent.$options.computed.xyz
    },
    childProprty1() {},
    childProprty2() {}
  }
}
0

For me it happened because I wrote method: instead of methods: (plural). It's a silly mistake but it can happen :)

0

In my case it was the methods: { } I had put the } before my method functions so for example I had it like this methods: { function , function }, function, function so some of the functions that were out of the curly braces were not included inside the methods function.

Not the answer you're looking for? Browse other questions tagged or ask your own question.