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方式完成，这与旧的香草JS方法相反。

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

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风格！

<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实例中声明任何变量，也无需在其外部声明任何普通代码。

您可以在vue实例中使用Vanilla，但目前您不需要它：

12
3qwert56
78990asdf
g
hm098
765
64

相反，您可以这样使用：

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

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

这里有个例子： https://jsfiddle.net/n4krde0h/19/

清空Vue.js数组

4 个答案: