Vue warn Property or method is not defined on the instance but referenced during render

Question

var MainTable   Vue extend     template    lt ul gt           lt li v-for   set index  in settings  gt            index               set title            lt button  click  changeSetting index   gt  Info  lt  button gt           lt  li gt           lt  ul gt      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                   With the above code  the error below occurs when the button is clicked       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  lt MainTable gt

User · Answer

It s probably caused by spelling error  I got a typo at script closing tag   lt  sscript gt

User · Answer

My issue was I was placing the methods inside my data object  just format it like this and it ll work nicely   lt script gt  module exports         data       gt            return               name   quot  quot                       methods            myFunc                    code                    lt  script gt

User · Answer

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

User · Answer

Adding my bit as well  should anybody struggle like me  notice that methods is a case-sensitive word    lt template gt       lt span gt   name   lt  span gt   lt  template gt    lt script gt  export default     name   MyComponent     Methods          name    return           lt  script gt     Methods  should be  methods

User · Answer

If you re experiencing this problem  check to make sure you don t have methods           or computed           declared twice

User · Answer

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  lt MainTable gt     The error is occurring because the changeSetting method is being referenced in the MainTable component here         lt button  click  changeSetting index   gt  Info  lt  button gt       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    lt ul gt           lt li v-for   set  index  in settings  gt            index               set title            lt button  click  changeSetting index   gt  Info  lt  button gt           lt  li gt           lt  ul gt      props    settings      methods        changeSetting value          this  emit  change   value                     var app   new Vue     el    settings     template    lt main-table  settings  data settings   change  changeSetting  gt  lt  main-table gt      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

User · Answer

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    lt template gt       lt span gt   name   lt  span gt   lt  template gt    lt script gt  export default     name   MyComponent     data         return         name                 lt  script gt

User · Answer

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   x000D   x000D     pulled data in this life cycle hook  saving it to my store created       FetchData getProfile        then myProfile   gt          const mp   myProfile data        console log mp        this  store dispatch  dispatchMyProfile   mp        this propsToPass   mp              catch error   gt          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   lt LeftPanel  data  menu    gt  x000D   x000D   x000D   This cleared that error away   I deployed it again to firebase hosting  and viola  Hope this bit helps you

User · Answer

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

User · Answer

In my case the reason was  I only forgot the closing   lt  script gt    tag   But that caused the same error message

User · Answer

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

User · Answer

I had two methods  in the  lt script gt   goes to show  that you can spend hours looking for something that was such a simple mistake

User · Answer

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

[javascript] [Vue warn]: Property or method is not defined on the instance but referenced during render

Examples related to javascript

Examples related to vue.js

Examples related to vuejs2

Examples related to vue-component