new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Vue · all subjects

template refs

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

ref attribute type and values

The ref special attribute expects a value of type string or Function.

ref attribute purpose

The ref attribute is used to register a reference to an element or a child component.

ref in Options API storage location

In Options API, the reference registered by ref will be stored under the component's this.$refs object.

ref in Options API example

In Options API, a ref is stored as shown in this example: ```vue-html <!-- stored as this.$refs.p --> <p ref="p">hello</p> ```

ref in Composition API with useTemplateRef

In Composition API, the reference will be stored in a ref with matching name using the useTemplateRef composable: ```vue <script setup> import { useTemplateRef } from 'vue' const pRef = useTemplateRef('p') </script> <template> <p ref="p">hello</p> </template> ```

ref on DOM element vs component

If ref is used on a plain DOM element, the reference will be that element. If used on a child component, the reference will be the child component instance.

ref with function value

The ref attribute can accept a function value which provides full control over where to store the reference: ```vue-html <ChildComponent :ref="(el) => child = el" /> ```

ref registration timing

Because refs are created as a result of the render function, you must wait until the component is mounted before accessing them.

$refs is non-reactive

this.$refs is non-reactive, therefore you should not attempt to use it in templates for data-binding.

$refs property

$refs is an object of DOM elements and component instances, registered via template refs. Type: { [name: string]: Element | ComponentPublicInstance | null }. This property is readonly.

Give your agent this brain