How do I refresh a computed array?


#1

Bonjour à tous,
J’ai ce tableau d’objets, sur lesquels je peux faire des actions. Ces actions font alors un appel à une API, qui me retourne l’objet mit à jour.

Voilà l’essentiel de mon code:

<template>
  <div class="comments">
    <div class="filter">
      <span :class="[filter === 'all' ? 'font-weight-bold' : '']" @click="filter = 'all'">All</span>
      |
      <span :class="[filter === 'pending' ? 'font-weight-bold' : '']" @click="filter = 'pending'">Pending</span>
      |
      <span :class="[filter === 'ok' ? 'font-weight-bold' : '']" @click="filter = 'ok'">Accepted</span>
    </div>

    <table class="table table-hover">
      <tbody>
        <tr v-for="(comment, index) in filteredComments">
          <td>{{ comment.email }}</td>
          <td>{{ comment.name }}</td>
          <td>
            <span @click="showView(comment)">
              <i class="fas fa-search"></i>
            </span>
            |
            <span class="check" v-if="!comment.accepted" @click="handleDecision('accept', comment.id)">
              <i class="fas fa-check"></i>
            </span>
            <span class="time" v-else @click="handleDecision('cancel', comment.id)">
              <i class="fas fa-times"></i>
            </span>
            |
            <span @click="handleDecision('delete', comment.id)">
              <i class="fas fa-trash-alt"></i>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
    <!-- Some more elements -->
  </div>
</template>

<script>
export default {
  methods: {
    handleDecision (decision, id) {
      this.$axios.post('/comment/decision', {decision: decision, id: id}, {
        headers: {
          'Authorization': `Bearer ${VueCookie.get('token')}`
        }
      })
        .then(response => {
          this.comments.map(comment => {
            if (comment.id === id) {
              return response.data
            }
          })
          this.$forceUpdate()
        })
    }
  },
  computed: {
    filteredComments () {
      if (this.filter === 'all') {
        return this.comments
      } else {
        return this.comments.filter(comment => this.filter === 'ok' ? comment.accepted : !comment.accepted)
      }
    }
  }
}          

Comme vous pouvez le voir, j’ai créé un système de filtre par statut (‘pending’ (en cours), ‘all’ (tout) et ‘accepted’), mais pour une raison inconnue, je ne peux pas mettre à jour ma méthode this.filteredComments, je ne peux voir mon tableau à jour que si je rafraichis ma page. J’ai également essayé this.$forceUpdate(), mais je ne suis pas certain que ça soit la chose à faire.

Comment dois-je procéder pour rafraichir ma méthode “computée” ?

Merci d’avance


#2

Salut,

filteredComments va se mettre à jour automatiquement quand tu mettras à jour comments.
Ton this.comments.map(...) produit un nouvel array mais ne change en rien comments.