Skip to content
Advertisement

Clearing an array content and reactivity issues using Vue.js

A few years ago it was bad practice to do

array = [];

because if the array was referenced somewhere that reference wasn’t updated or something like that.

The correct way was supposed to be array.length = 0;

Anyway, JavaScript has been updated now, and there’s a framework called Vue.js

Vue does not catch array.length = 0; so the property won’t be reactive. But it does catch array = [];

Can we use array = []; now, or is JavaScript still broken?

Advertisement

Answer

Doing something like myArray.splice(0) will clear the content of the array and that will also be 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>
Advertisement