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>

Vue.js: 属性或方法未在实例上定义

Vue.js: Property or method is not defined on the instance

vue.js

vue-component

vuejs2

Vue.js: 属性 或方法未在实例上定义

Vue.js: Property or method is not defined on the instance

vue.js

vue-component

vuejs2

Vue.js: 属性或方法未在实例上定义