Question

我刚刚开始学习VueJ，并尝试绑定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",
});

Answer 1

发生这种情况是因为有误。所有方法都应放在methods中。最后不要忘记s。

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

Answer 2

将方法重命名为方法，就可以了。您可以向Vue组件构造函数对象添加任意数量的键，但是只有与已知属性相对应的Vue才会选择它们。因此，“方法”将被忽略，而“方法”将起作用。

Vue.Js（2）：属性或方法“ hideModel”未在实例上定义，但在渲染期间被引用

2 个答案: