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