Mar 18, 2017
0
Level 13
Call great grand children component method
I got a set of nested components as follows in Vue 2.2.1:
<Root>
<VForm>
<Accordion>
<Panel>
<Panel>
<Panel>
<Stripe ref="stripe">
And I need to call a method getToken on the Stripe component when the form is submitted. On my <VForm> component I have the following template.
<template>
<form :method="method" :action="action" :class="classes" :autocomplete="autocomplete" @submit.prevent="submit">
<slot></slot>
</form>
</template>
<script>
export default {
props: {
method: {
type: String,
default: 'POST'
},
action: {
required: true,
type: String
},
classes: {
type: String
},
autocomplete: {
type: String,
default: 'on'
}
},
methods: {
submit(){
this.$children[0].$children[2].$children[0].getToken()
}
}
}
</script>
Accessing the children one by one until you get to the Stripe component works but looks "dirty" to me. Is there another more elegant way to achieve this?
Please or to participate in this conversation.