3
votes

Comment vérifier si la liste est vide dans un modèle vue.js?

Question assez simple.

Dans mon modèle vue.js, j'ai:

<template v-for="node in nodes">
  [[ node ]]
</template>

Je veux retourner des nœuds dans la liste ou imprimer "N / A" si la liste est vide.

Je sais comment faire cela avec une fonction js, mais je ne sais pas comment accomplir la même chose depuis le modèle.

javascript vue.js

1 commentaires

vous voulez dire que vous voulez vérifier si la liste des nœuds est vide?

4 Réponses :

0
votes

pour vérifier si une liste est vide, il vous suffit d'utiliser v-if , de cette façon votre modèle sera comme ci-dessous:

<template v-if="nodes.length === 0">
  N/A
</template>

<template v-for="node in nodes"  v-else>
  [[ node ]]
</template>

pour plus informations sur Rendu conditionnel VueJs veuillez consulter le document.

0 commentaires

1
votes

Vous pouvez vérifier comme:

<template v-if="nodes.length">  // When there are some records available in nodes
  // Iterate it and display the data
</template >
<template v-else>
  // No record found
</template>

Référence a>

0 commentaires

0
votes

Utilisez une fonction de rendu comme

export default {
  data() {
    return {
      nodes: ['item 1', 'item 2']
    }
  },
  render(h) {
    if (this.nodes.length == 0) {
      return h('p', 'No item')
    } else {
      return h(
        'p',
        {},
        this.nodes.map((item) => h('p', item))
      )
    }
  }
}

0 commentaires

3
votes

Vous devriez vérifier à la fois indéfini et longueur en utilisant Vue v-if . Si jamais vous utilisez asyncComputed par exemple, il sera indéfini jusqu'à ce que la méthode async soit résolue. Vous êtes donc couvert pour nodes = null , nodes = undefined et nodes = [] .

<template v-if="!nodes || !nodes.length>
  Nothing To Show
</template>
<template v-else v-for="node in nodes">
  {{ node }}
</template>

Ou combinez-les

<template v-if="!nodes>
  Loading
</template>
<template v-else-if="!nodes.length">
  Empty
</template>
<template v-else v-for="node in nodes">
  {{ node }}
</template>

J'aime utiliser ! Nodes.length au lieu de length! == 0 juste au cas où quelque chose d'inattendu en plus d'un tableau se retrouve dans les données, auquel cas il utilisera très probablement le modèle vide et ne lèvera pas d'exception. Moins de saisie aussi!

0 commentaires