How to access a method in a deep nested parent [Vue][Vuetify]

Question

I have made a Vue component that has a v-data-table.

Child Component

    <template>
    <div>
        <v-data-table>
            <template v-slot:item.actions="{ item }">
                <v-tooltip bottom>
                    <template v-slot:activator="{ on, attrs }">
                        <v-icon @click="validation(item)"> mdi-check <v-icon/>
                    <span> Validar movimentação </span>
                </v-tooltip>
            </template>
        </v-data-table>
    </div>
</template>
<script>
export default {
        name: "ViewDraftTable",
        data() {
            return {
                movimentacoesSalvasHeader: [...]
            }
        },
        methods: {
            validation(item) {
                this.$parent.$parent.$parent.$parent.$parent.$parent.$parent.validateMov(item)
            },
        }
    }
</script>

And in the parent, I have the validate() method. How am I supposed to call this method, without having to navigate inside the nested $parents?

tony19 · Accepted Answer · 2022-07-16 03:03:34Z

1

One solution is to use provide/inject, where the parent provides the method, and a deep nested child could inject it where needed:

// Parent.vue
export default {
  provide() {
    return {
      validate(item) {
        /* perform validation */
      }
    }
  }
}

// ViewDraftTable.vue
export default {
  inject: {
    validate: {
      default: item => { /* perform default validation */ }
    }
  },
  methods: {
    validacao(item) {
      this.validate(item)
    }
  }
}

edited Jul 16, 2022 at 3:03

answered Apr 8, 2021 at 20:19

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tauzN · Accepted Answer · 2021-04-08 20:35:17Z

0

You should take a look at a state management library like Vuex

Or use provide/inject

edited Apr 8, 2021 at 20:35

answered Apr 8, 2021 at 19:50

tauzN

7,4872 gold badges22 silver badges23 bronze badges

1 Comment

Samuel Belo Over a year ago

Thx, I know about Vuex but I guess that this is not the case for use it, because it's a simple method call from the child. I'm thinking about something like just reference the method from parent in the child.

Collectives™ on Stack Overflow

How to access a method in a deep nested parent [Vue][Vuetify]

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related