Emptying Vue.js Array

Question

I recently started using Vue.js, and have ran into a small problem. I have an array, and have used Vue.js to add that array into the rendered code. Using standard .push works fine for that.

However, I also want to be able to clear the array which would clear the rendered code. But when I try array = [] to clear it, the code doesn't work, and everything stops working.

How do I clear the list without breaking the program?

I replicated the problem in the below snippet.

 let results = [1, 2]; let num = 3; var app = new Vue({ el: '#app', data: { results: results } }); document.getElementById("add").addEventListener("click", function() { results.push(num); num++; }); document.getElementById("clear").addEventListener("click", function() { results = []; num = 1; });

 .as-console-wrapper { height: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <button id="add">Add</button> <button id="clear">Clear</button> <div id="app"> <h1 v-for="result in results"> {{ result }}</h1> </div>

Answer 1

So there are a couple of small things that I updated in your app to be done the vue way , as opposed to the old vanilla JS approach.

• First off we manage all component data within the data section, so you don't need your above JS variables.
• It's also a good approach to return a function that returns your json here, rather than just have your json object raw.
• Next, you no longer need to use that old-school document.getElementById("add").addEventListener approach, instead just return your functions in the methods , and then simply call to them with the v-on:click="addNew" attribute

 new Vue({ el: "#app", data: () => { return { results: [3, 1, 4, 1, 5] }; }, methods: { addNew() { const nextNum = this.$data.results.length + 1; this.$data.results.push(nextNum); }, clearAll(){ this.$data.results = []; } } })

 .as-console-wrapper { height: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <h2>Awesome Counting App</h2> <button v-on:click="addNew">Add</button> <button v-on:click="clearAll">Clear</button> <hr> <ul> <li v-for="result in results" v-bind:key="result"> {{result}} </li> </ul> </div>

Answer 2

Solution 1:

Move the buttons inside your #app and use Vue's v-on:click handler.

 let results = [1, 2]; let num = 3; var app = new Vue({ el: '#app', data: { results: results }, methods: { add: function() { this.results.push(num); num++; }, clear: function() { this.results = []; num = 1; } } });

 .as-console-wrapper { height: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button v-on:click="add">Add</button> <button v-on:click="clear">Clear</button> <h1 v-for="result in results"> {{ result }}</h1> </div>

---

Solution2: Use Vue's $data API

 let results = [1, 2]; let num = 3; var app = new Vue({ el: '#app', data: { results: results } }); document.getElementById("add").addEventListener("click", function() { app.$data.results.push(num) num++; }); document.getElementById("clear").addEventListener("click", function() { app.$data.results = []; num = 1; });

 .as-console-wrapper { height: 0px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <button id="add">Add</button> <button id="clear">Clear</button> <div id="app"> <h1 v-for="result in results"> {{ result }}</h1> </div>

Answer 3

Make it more Vue ish!

<button @click="add">Add</button>
<button @click="clear">Clear</button>

var app = new Vue({
      el: '#app',
      data: {
        results: [1, 2],
        num : 3
      }, 
      methods(){
          add(){
            this.results.push(num);
            this.num++;
          },
          clear(){
           this.results = [];
           this.num = 1;
          }
      }

    });

Answer 4

If you working with Vuejs you don't need of declare any variable out Vue instance, and any vanilla code outside them.

You can use vanilla inside vue instance, but for now, you dont need it:

document.getElementById("add").addEventListener("click", function() {
  results.push(num);
  num++;
});

document.getElementById("clear").addEventListener("click", function() {
  results = [];
  num = 1;
});

Instead you may use like this:

new Vue({
el: '#app',
data: {
    results: [],
    num: 1
},
methods: {
    addNumberArray(){
    this.results.push(number);
    number++;
  },
  clearNumberArray(){
    this.results = [];
    number = 1;
  }
}
});

Here a live example: https://jsfiddle.net/n4krde0h/19/