Vue 3 is the up and coming version of Vue front end framework.
It builds on the popularity and ease of use of Vue 2.
In this article, we’ll look at rendering arrays with v-for .
Maintaining State
When v-for re-renders a list, the items are patched in place.
When then items change, the existing items are updated.
However, this means when the items re-render, their state will be cleared.
Therefore, patching is only suitable when we render a list that doesn’t rely on child component state or temporary DOM state.
To let Vue know the identity of an item, we should add a key prop to each rendered item so that Vue can reuse and reorder existing elements.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<div v-for="p in people" :key="p.id">
{{ p.name }}
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
people: [
{ id: 1, name: "mary" },
{ id: 2, name: "james" },
{ id: 3, name: "jane" }
]
};
}
}).mount("#app");
</script>
</body>
</html>
to render a list from the people array.
We passed in a unique ID to the key prop to make sure that the ID stays the same no matter what order the items are in.
Only primitive values should be used as key values.
So we can use strings or numbers like in the example.
Array Change Detection
Vue 3 wraps array mutation methods so they also trigger view updates.
The wrapped methods include:
push()pop()shift()unshift()splice()sort()reverse()
They’ll all trigger Vue to update the rendered list when they’re called.
Replacing an Array
Methods that return a new array don’t trigger Vue to update the rendered list because they return a new array.
Therefore, we need to assign the returned array to the original value.
For example, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<input v-model="name" @keydown="search" />
<div v-for="p in people" :key="p.id">
{{ p.name }}
</div>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
name: "",
people: [
{ id: 1, name: "mary" },
{ id: 2, name: "james" },
{ id: 3, name: "jane" }
]
};
},
mounted() {
this.orig = JSON.parse(JSON.stringify(this.people));
},
methods: {
search() {
if (this.name.length > 0) {
this.people = this.people.filter(item =>
item.name.match(new RegExp(this.name, "g"))
);
} else {
this.people = this.orig;
}
}
}
}).mount("#app");
</script>
</body>
</html>
We called the filter method to filter items according to the inputted value.
So we’ve set the returned value to the this.people property so that the new value will be rendered.
Displaying Filtered/Sorted Results
If we want to display filtered or sorted results, we can do this with computed properties.
For instance, we can write:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
<script src="https://unpkg.com/vue@next"></script>
</head>
<body>
<div id="app">
<p v-for="n in oddNumbers">{{ n }}</p>
</div>
<script>
const vm = Vue.createApp({
data() {
return {
numbers: [1, 2, 3, 4, 5]
};
},
computed: {
oddNumbers() {
return this.numbers.filter(number => number % 2 === 1);
}
}
}).mount("#app");
</script>
</body>
</html>
to return an array of odd numbers in the computed property oddNumbers .
Then we can render oddNumbers instead of the original number array and using v-if to do the filtering.
Conclusion
We can use computed properties to display filtered values.
Array methods that mutate the array will trigger re-render when they’re called.
Array methods that return the new array will need to have their returned value assigned to an instance variable for them to be rendered.
