代码之家 › 专栏 › 技术社区 › Aniket G

清空Vue.js数组

vue.js javascript

Aniket G · 技术社区 · 5 年前

我最近开始使用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>

1 回复 | 直到 5 年前

Fcmam5 5 年前

解决方案1:

移动应用程序内的按钮并使用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;
});

.作为控制台包装{
高度: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>

Ahmad Mobaraki 5 年前

让它更威风!

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

    });

Robson Braga 5 年前

如果使用Vuejs,则不需要声明任何变量out Vue实例,以及它们之外的任何普通代码。

您可以在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/

Alicia Sykes 5 年前

所以我在你的应用程序中更新了一些小的事情要做 Vue方式 而不是传统的普通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>