Vue: Broken v-on inside component

[yemi]

This used to work but after upgrading a few versions it doesn't work anymore and i cant figure out why.

<div v-component="card">
    <button v-on="click:clicked($event)">Click me 1</button>
    <button v-on="click:clicked">Click me 2</button>
</div>

My code generates 2 errors depending on how i call the function inside v-on.

v-on="click:clicked($event)" generates Uncaught TypeError: scope.clicked is not a function
and
v-on="click:clicked" generates [Vue warn]: Directive "v-on:clicked" expects a function value.

I would like to pass the event object to the method.

Heres the fiddle: http://jsfiddle.net/ypsscvy5/

[yyx990803]

There has been some scope-related breaking changes since 0.11. The content here inside a component is "transcluded", and they are compiled in the parent's scope - so they are looking for the clicked method on the parent instead of the child.

You can get the old behavior by adding inline-template to your component:

<div v-component="card" inline-template>
  content here will be treated as the component's own template
</div>

Ref:

• http://vuejs.org/guide/components.html#A_Note_on_Scope
• http://vuejs.org/guide/components.html#Content_Insertion

[gocanto]

Hello @yyx990803

I am using vue 1.0.20 and just came across this issue. Is there something else related to this?

[adius]

For me the problem was something else.
Although it's unrelated, because it was just a syntax error of me, I'll post it anyway:

This works:

<script>
  export default {
    methods: {
      submitForm () {
        alert('test')
      },
    },
  }
</script>

This doesn't:

<script>
  export default {
    methods () {
      return {
        submitForm () {
          alert('test')
        }
      }
    }
  }
</script>

[azamat-sharapov]

@adius methods must be object, not function.

[azamat-sharapov]

because it was just a syntax error of me

Oh, you probably posted it intentionally for newbies, sorry.