Vue.js：属性或方法未在实例

Question

我有一个简单VUE组件定义：

Vue.component('repo-button', { 
    props:["check_in_id", "repo_id"], 
    template: '#repo-button', 
    methods: { 
    fetchRepo: function() { 
     console.log("this is working") 
    } 
    }, 
    data: function() { 
    var that = this; 
    return {} 
    } 
}); 

var repositionings = new Vue({ 
    el: "#repo-vue" 
}) 

而我的看法是这样的：

<script type="text/x-template" id="repo-button"> 
    <div class='socialCircle-item success'> 
    <i class='fa fa-comment' 
     :data-check_in='check_in_id' 
     :data-repo='repo_id'> 
    </i> 
    </div> 
</script> 

<div id="repo-vue"> 
    <div is="repo-button" repo_id="8" check_in_id="30" @click="fetchRepo></div> 
</div> 

，我看到的错误：

[Vue warn]: Property or method "fetchRepo" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. 

看起来好像我已经注册了方法，但它在方法的根组件中寻找时，我认为它应该是一个实例方法。 我该如何包含fetchRepo实例方法？

Answer 1

您已将fetchRepo定义为您的组件的一种方法，但您正试图从以外的组件中调用它。

移动组件内的点击处理程序。

<script type="text/x-template" id="repo-button"> 
    <div class='socialCircle-item success' @click="fetchRepo"> 
    <i class='fa fa-comment' 
     :data-check_in='check_in_id' 
     :data-repo='repo_id'> 
    </i> 
    </div> 
</script> 

<div id="repo-vue"> 
    <div is="repo-button" repo_id="8" check_in_id="30"></div> 
</div>