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>