$find

vm.$find('componentName' | componentDefinition | '.css-selector')

Searches the component instance and returns an array-like object of either matching components or matching elements.

To find a component, you can either pass the component name as a string, or a component definition object. The component must have a name property, otherwise it will not be able to find it. Vuenit will automatically set the name property for locally-registered components and stubbed components set with the components option. However, it will not do this for nested components.
The returned components will all have these augmented properties on them.

let child = vm.$find('childComponent')[0];
let grandchild = child.$find(componentDefinitionObject)[0];

To find an element, pass in any valid css selector. It will return an array of matching elements. The returned elements will have the same properties available, i.e. $html, $find etc.

let divs = vm.$find('div');
let content = divs.map(d => d.$html).join('\n');

The returned object also exposes the properties of the first item in the list, for example:

let child = vm.$find('childComponent');
child.myPropValue === 'foo';
child.$name === 'childComponent';
// etc.

As of v1 the $find method returns an array-like object rather than a true array. It still has all of the array-style functionality, but things like Array.isArray will return false, and [].concat(found) will fail. You will instead need to convert the object into an array before using these methods, i.e. [].concat(found.slice())

results matching ""

    No results matching ""