Guide: List Rendering

Question 1

What is the syntax of v-for?

Answer 1

item in items where items is the source data array, and item is an alias for the array element being iterated on

You can also use item of items

Question 2

How can access the index in a v-for?

Answer 2

v-for="(item, index) in items"

Question 3

What are the three syntaxes for iterating over an object?

Answer 3

• Iterating through the values of an object’s properties
  
  • v-for="value in object"
• Iterating through the values and keys of an object’s properties
  
  • v-for="(value, key) in object"
• Iterating through the values, keys, and the index
  
  • v-for="(value, key, index) in object"

Question 4

How is order determined when looping through objects?

Answer 4

It’s determined using the builtin Object.keys(), which is not guaranteed to be consisten across JS engines

Question 5

What is the default strategy Vue uses when updating a list rendered with v-for, and when is it suitable?

Answer 5

“in-place patch”

Only suitable when…

1. Your list render output does not rely on child component state
2. Your list render output does not rely on temporary DOM state (such as an input filter box)
3. The content is simple

Question 6

How do you enable Vue to track each node’s identity, and what will this allow Vue to do?

Answer 6

Use a unique value in the key attribute.

Allows Vue to track each node’s identity, and thus reuse and reorder existing elements

`

`

Question 7

What does Vue do to observed arrays? Give detail.

Answer 7

Vue wraps observed arrays’ mutation methods so that they’ll trigger view updates

The wrapped methods are:

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

Question 8

Describe how replacing an array works with non-mutation methods.

Answer 8

Some methods, like filter(), do not mutate the array, and return a new one.

If you assign the filtered array to the existing one, it will be a very efficient operation since Vue maximizes DOM element reuse when replacing an array with another array containing overlapping objects.

Question 9

What are the detection caveats in relation to arrays? And how we do overcome them?

Answer 9

1. Vue cannot detect directly setting an item with an index
   
   • vm.items[idx] = newValue
   • Two options to overcome this:
     
     1. vm.$set(vm.items, idx, newValue)
     2. vm.items.splice(idx, 1, newValue)
2. Vue cannot detect when you modify the length of the array
   
   • vm.items.length = newLength
   • Use this to deal with this caveat
     
     • vm.items.splice(newLength)

Question 10

What are the object change detection caveats?

Answer 10

1. Vue cannot detect object property addition or deletion
   
   • Can overcome this by using vm.$set to add reactive properties
     
     • `vm.$set(vm.userProfile, ‘age’, 32)
2. To assign multiple new properties to an existing object:
   
   • Create a new object with properties from both, using Object.assign() or _.extend() and then assign to fresh object
     
     • vm.userProfile = Object.assign({}, vm.userProfile, {...})

Question 11

How should we handle displaying filtered or sorted results of an array?

Answer 11

Use a computed property that returns the filtered or sorted array.

In situations where computed properties are not feasible, like in a v-for loop, use a method.

• Understand that using any instance data in the computed property will not trigger the property to update in the view because it’s not actually a bound property. The method was simply invoked for each render.

Question 12

How can we iterate over a range in the template?

Answer 12

Use v-for with an integer. It will repeat the template that many times.

{{ n }}

Question 13

How do you render a block of multiple elements a certain number of times?

Answer 13

Use v-for on an encapsulating template tag

Question 14

Describe v-for and v-if on the same node.

Answer 14

When existing on the same node, v-for has a higher priority than v-if, thus, v-if will be run on each iteration of the loop separately.

If you conditionally want to skip the loop, place v-if on a wrapper element, or template tag

Question 15

Describe using v-for with a component.

Answer 15

• v-for can be used directly on a custom component, like any other element
• the key attribute is required for custom components
• Using v-for on a custom component does not automatically pass any datat to the component.
  
  • You must still explicity pass your props in
    *