Vue.Js (2): свойство или метод "hideModel" не определен в экземпляре, но на него ссылаются во время рендеринга - PullRequest
Новая
       14

Vue.Js (2): свойство или метод "hideModel" не определен в экземпляре, но на него ссылаются во время рендеринга

0 голосов
/ 14 июня 2019

Я только начал изучать VueJs и пытаюсь связать clickEvent и скрыть сообщение <article>. Но это показывает следующее предупреждение - 

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

Хотя, когда я пытаюсь встроить, как. 

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

Работает нормально. Но с функцией это не работает.

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/vue@2.6.10/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",
});

Ответы [ 2 ]

2 голосов
/ 16 июня 2019

Это происходит из-за опечаток.Все методы должны быть помещены в methods.Не забудьте про s в конце. 

...
methods:{
  hideModel(){
    this.isVisible=false;
  }
}
...
0 голосов
/ 14 июня 2019

переименуйте метод в методы, и у вас все будет хорошо. Вы можете добавить любое произвольное количество ключей к объекту конструктора компонента Vue, но они будут выбраны Vue только в том случае, если они соответствуют известным свойствам. Следовательно, «метод» будет игнорироваться, тогда как «методы» будут работать.

...