Vue.js 2 Design Patterns and Best Practices

Mutating property arrays

An important consideration to make when passing down arrays and objects as properties within JavaScript is the fact that they are passed by reference. This means that any changes to the original array within the child will also spill over into the parent component. Let's see this in action:

<template>  <div>    <h1>Parent Component</h1>    <ul>      <li v-for="friend in friendList" :key="friend.id">{{friend.name}}</li>    </ul>    <Person :friendList="friendList" />  </div></template><script>import Person from './components/Person';export default {  data() {    return {      friendList: [{ id: 1, name: 'John Doe' }]    }  },  components: {    Person  }}</script>

Here, we have a component (App.vue) that contains an array that we're displaying on screen ...