[Vuejs]-Vue directives inside templates

0πŸ‘

βœ…

@Leo is correct; essentially you are trying to call the removeTab method in your child, but the method is defined on your parent. The child does not have access to the methods on the parent directly.

In order to get your example working, since your parent will likely be managing the tabs, you will want to emit an event from your tabs and listen for the event in your parent.

<button class="item" v-on:click="$emit('remove-tab')">{{tab.nomeTab}} &nbsp; <div >remove</div></button>

And in the parent template

<tab v-for ="tab in tabs" :key="tab" :tab="tab" @remove-tab="removeTab"></tab>

And here is your fiddle fixed.

Not also I added a key to your v-for. You should always use a key with v-for.

0πŸ‘

Vue has isolated scope. You have v-on:click="removeTab()" in the template of your tab component, but it’s not defined within the component.

Leave a comment