Vue.js：プロパティまたはメソッドは、私は、単純なVUEコンポーネント持っ

Question

インスタンスで定義されていません。

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>