javascript - 清空 Vue.js 数组

Question

我最近开始使用 Vue.js，遇到了一个小问题。我有一个数组，并使用 Vue.js 将该数组添加到呈现的代码中。使用标准的 .push 可以很好地解决这个问题。

但是，我还希望能够清除会清除呈现代码的数组。但是当我尝试 array = [] 清除它时，代码不起作用，一切都停止了。

如何在不中断程序的情况下清除列表？

我在下面的片段中复制了这个问题。

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

解决方案一:

将按钮移到#app 中并使用 Vue 的 v-on:click处理程序。

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>

---

解决方案2:使用 Vue 的 $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>