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 · Tutorial · all subjects

tutorial/list-rendering

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

v-for directive syntax for list rendering

The v-for directive renders a list of elements based on a source array. The syntax is v-for="item in array" where item is a local variable representing the current array element. The variable is only accessible on or inside the v-for element, similar to a function scope.

key attribute for v-for lists

Each element in a v-for loop should have a unique key attribute bound to it using :key. The key allows Vue to accurately move each element to match the position of its corresponding object in the array.

Updating lists with mutating methods

Lists can be updated by calling mutating methods on the source array. In Composition API, use todos.value.push(newTodo). In Options API, use this.todos.push(newTodo).

Updating lists by replacing the array

Lists can be updated by replacing the entire array with a new one. In Composition API, use todos.value = todos.value.filter(/* ... */). In Options API, use this.todos = this.todos.filter(/* ... */).

v-for list rendering example

Basic v-for example: <ul> <li v-for="todo in todos" :key="todo.id"> {{ todo.text }} </li> </ul> This renders a list item for each todo in the todos array, binding the todo.id as the key attribute.

Give your agent this brain