1
votes

Vider la matrice Vue.js

J'ai récemment commencé à utiliser Vue.js et j'ai rencontré un petit problème. J'ai un tableau et j'ai utilisé Vue.js pour ajouter ce tableau dans le code rendu. L'utilisation de .push standard fonctionne très bien pour cela.

Cependant, je veux aussi pouvoir effacer le tableau qui effacerait le code rendu. Mais quand j'essaye array = [] pour l'effacer, le code ne fonctionne pas et tout cesse de fonctionner.

Comment effacer la liste sans interrompre le programme?

J'ai reproduit le problème dans l'extrait ci-dessous.

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

.as-console-wrapper {
  height: 0px;
}

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

javascript vue.js

0 commentaires

4 Réponses :

1
votes

Il y a donc quelques petites choses que j'ai mises à jour dans votre application à faire la manière vue , par opposition à l'ancienne approche JS vanilla.

Tout d'abord, nous gérons toutes les données des composants dans la section data , vous n'avez donc pas besoin des variables JS ci-dessus.
C'est aussi une bonne approche pour renvoyer une fonction qui renvoie votre json ici, plutôt que d'avoir simplement votre objet json brut.
Ensuite, vous n'avez plus besoin d'utiliser cette approche ancienne document.getElementById ("add"). addEventListener , mais renvoyez simplement vos fonctions dans les méthodes , puis appelez-les simplement avec l'attribut v-on: click = "addNew"

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

.as-console-wrapper {
  height: 0px;
}

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 = [];
    }
  }
})

2 commentaires

Pourriez-vous s'il vous plaît fournir une explication également

Bien sûr, il suffit de l'écrire maintenant;)

1
votes

Solution 1:

Déplacez les boutons dans votre #app et utilisez v-on: cliquez sur le gestionnaire.

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

.as-console-wrapper {
  height: 0px;
}

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

Solution2: Utilisez l ' API $ data

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

.as-console-wrapper {
  height: 0px;
}

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

1 commentaires

Votre deuxième solution est exactement ce que je recherche. Merci beaucoup!

1
votes

Rendez-le plus 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;
          }
      }

    });

0 commentaires

1
votes

Si vous travaillez avec Vuejs, vous n'avez pas besoin de déclarer une variable en dehors de l'instance Vue, ni du code vanilla en dehors d'eux.

Vous pouvez utiliser l'instance vanilla inside vue, mais pour l'instant, vous n'en avez pas besoin: p>

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

À la place, vous pouvez utiliser comme ceci:

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

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

Voici un exemple en direct: https://jsfiddle.net/n4krde0h/19/

0 commentaires