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

Question

I have a simple vue component:

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"
})

And my view looks like:

<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>

and I see the error:

[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.

It seems like I have registered the method, but it's looking in the root component for the method when I think it should be an instance method. How am I supposed to include the fetchRepo instance method?

Bert Bert · Accepted Answer · 2017-04-03T18:37:58

You've defined fetchRepo as a method of your component, but you are trying to call it from outside the component.

Move the click handler inside your component.

<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: Property or method is not defined on the instance

1 Answers