Vue.Js(2) : Property or method "hideModel" is not defined on the instance but referenced during render

Question

I have just started to learn VueJs and trying to bind a clickEvent and hide the message <article>. But it show the following warning-

[Vue warn]: Property or method "hideModel" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Although when i m trying in-line like.

<button type='button' v-on:click='isInvisible=false'>X</button>

It working fine. But with the function it not working.

index.html

<div id="root">
 <message title="my-message" body="lorem ipsum sit ben"></message>
 <message title="Other message" body="This is other message"> 
  </message>
 </div>
    <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.css" />
 <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
  <script src="main.js"></script>

main.js

Vue.component('message', {
props:['title', 'body'],

data(){
    return {
        isVisible:true
    };
},
template:`<article class="message" v-show='isVisible'>
            <div class="message-header">
            <p>{{ title }}</p>
            <button type='button' v-on:click='hideModel'>X</button>
            </div>
            <div class="message-body">
                {{body}}
            </div>
        </article>`,
method:{
hideModel(){
  this.isVisible=false;
}
}

})


new Vue({
el:"#root",
});

MartenCatcher MartenCatcher · Accepted Answer · 2019-06-16T12:19:57

It happens because of mistyping. All methods should be placed into the methods. Don't forget about s in the end.

...
methods:{
  hideModel(){
    this.isVisible=false;
  }
}
...

Vue.Js(2) : Property or method "hideModel" is not defined on the instance but referenced during render

2 Answers