Accessing nested child components in VueJS

https://v2.vuejs.org/v2/guide/components.html#Child-Component-Refs

Despite the existence of props and events, sometimes you might still need to directly access a child component in JavaScript. To achieve this you have to assign a reference ID to the child component using ref. For example:

<div id="parent">
  <user-profile ref="profile"></user-profile>
</div>

var parent = new Vue({ el: '#parent' })
// access child component instance
var child = parent.$refs.profile

When ref is used together with v-for, the ref you get will be an array
or an object containing the child components mirroring the data
source.

Basically inside AccountSelector.vue you can do this.$refs.anAccount.map(account => doThingToAccount(account))

Edit
The above answer is for accessing a direct child.

Currently there is no way to access a non direct parent / child component with $refs. The best way to get access to their data would be through events https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication or by using Vuex (Which i would recommend).

Non direct parent – child communication is very tricky without 1 of these 2 methods.

Leave a Comment

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)