Update Vuejs son Component method

Asked

Viewed 601 times

1

I’m trying to update a method of a child Component, but so far I have no solution, my question is the following.

Within the Header.vue, I show the hours outstanding

<span>
    <b>{{Hours}}</b> horas pendentes
</span>

    hours(){                
  axios.get(`http://localhost:83/Pendencia/HorasPendentes/${this.$localStorage.get('RecursoId')}`)
    .then(res => {
    this.Hours = res.data.Retorno
  })
    .catch(err => console.log(err))
}

Now in my file Pendencia.vue, I think a API, and on the return of that API call on the Pendencia.vue would like to call again the API of Header.vue.

javascript vue.js

1 answer

3


You can use the $children to find a child component and thus access all your data, methods, etc...

Try to create as follows:

const componenteFilho = this.$children.find(component => component.$options.name === "Nome_do_componente_filho");

componenteFilho.funcao_da_Api()

So use this on a method , mounted or somehow better for you ;)

  • I can use it even in my question (which maybe I haven’t explained it right). I use Nested Routes, there the Pendencias is part of the Dashboard, and the Header, is being called in the Dashboard and not in the Pendencia, sorry I haven’t explained this before.

  • Can’t find the Header component from Pendencias is this?

  • Yes, I used your code, giving a console.log(this.$children.find(component => component.$options.name === "Header")) and returned me undefined

  • 1

    understood, so the two components are children of Dashboard. In case you can go back to the parent and look for the child component: this.$parent.$children.find(component => component.$options.name === "Header")

  • It worked, thanks

  • @Rubensbarbosa Following the same logic, how would I do the same, however to call a function that is within my child Component? <Datepicker /> ?

Show 1 more comment

Browser other questions tagged javascript vue.js

You are not signed in. Login or sign up in order to post.