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>

tony19 · Accepted Answer · 2022-07-16 02:34:13Z

1

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>

edited Jul 16, 2022 at 2:34

tony19

140k24 gold badges281 silver badges354 bronze badges

answered May 12, 2019 at 22:43

Fcmam5

7,3171 gold badge26 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aniket G Over a year ago

Your second solution is exactly what I'm looking for. Thanks so much!

Robson Braga · Accepted Answer · 2019-05-12 22:44:15Z

1

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/

answered May 12, 2019 at 22:44

Robson Braga

4323 silver badges8 bronze badges

Comments

Alicia Sykes · Accepted Answer · 2019-05-12 22:46:41Z

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>

edited May 12, 2019 at 22:46

answered May 12, 2019 at 22:39

Alicia Sykes

7,3928 gold badges39 silver badges71 bronze badges

2 Comments

Aniket G Over a year ago

Could you please provide an explanation as well

Alicia Sykes Over a year ago

Sure, just writing it now ;)

Ahmad Mobaraki · Accepted Answer · 2019-05-12 23:10:28Z

1

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;
          }
      }

    });

edited May 12, 2019 at 23:10

answered May 12, 2019 at 22:43

Ahmad Mobaraki

8,2485 gold badges54 silver badges75 bronze badges

Collectives™ on Stack Overflow

Emptying Vue.js Array

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related