CODEWITHSUNDEEP
vue.js
rmagnum2002
rmagnum2002

Reputation: 11421

Method can not be found when using v-on Instance Method

I am using v-on in a js template (used later in a component) to fire a click event:

v-on='click : favoritesToggle(venue.slug, $event)'

however when I clik it I get

Uncaught TypeError: scope.favoritesToggle is not a function

still the vue object finds it in console:

vm.favoritesToggle
> exports.bind(a)

I have a few other v-on click events on the same page and working well, but they are not inside a js template, could it be something related to not finding the methods because I am triggering on click within a js template? Thank you.

Upvotes: 1

Views: 3692

Answers (1)

rmagnum2002
rmagnum2002

Reputation: 11421

Based on docs I understood that methods called within a component should be placed inside that component.

Example: 

Vue.component('venue-component', {
  template: $('#venue-template').html(),
  methods: {
    favoritesToggle: function (slug, e) {
      e.preventDefault()
      var resource = this.$resource('/api/venues/' + slug + '/favorites_toggle')

      resource.save({
        method: 'like' // unlike
      }, function (data) {})
        .success(function (data, status, request) {
        // handle success
        }).error(function (data, status, request) {
        // handle error
      })
    },
  }
})

Upvotes: 4

Related Questions