清空 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

所以我在你的应用程序中更新了一些小事情，以vue 的方式完成，而不是旧的 vanilla JS 方法。

• 首先，我们管理data部分中的所有组件数据，因此您不需要上面的 JS 变量。
• 返回一个在此处返回您的 json 的函数也是一种好方法，而不仅仅是让您的 json 对象原始。
• 接下来，您不再需要使用老式的document.getElementById("add").addEventListener方法，而只需在methods中返回您的函数，然后只需使用v-on:click="addNew"调用它们属性

 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

解决方案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>

Answer 3

让它更 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

如果你使用 Vuejs，你不需要在 Vue 实例之外声明任何变量，以及它们之外的任何 vanilla 代码。

你可以在 vue 实例中使用 vanilla，但现在你不需要它：

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

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

相反，您可以这样使用：

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

这是一个活生生的例子： https ://jsfiddle.net/n4krde0h/19/