Vue.js - Clearing an array content and reactivity issues
Doing something like myArray.splice(0) will clear the content of the array and that will be also reactive :
Vue.config.devtools = false;Vue.config.productionTip = false;new Vue({ el: '#app', data() { return { items: ["a", "b", "c"] } }, methods: { flush() { this.items.splice(0); } }});<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" /><script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><div id="app" class="container"> <div v-for="i in items">{{i}}</div> <button @click="flush"> flush</button></div>
Vue cannot detect the following changes to an array: When you directlyset an item with the index, e.g. vm.items[indexOfItem] = newValue Whenyou modify the length of the array, e.g. vm.items.length = newLength
from: https://vuejs.org/v2/guide/reactivity.html#For-Arrays
So, cleaning a reactive array:
yourArray.splice(0)