web-dev-qa-db-fra.com

Définissez une variable à l'intérieur d'une boucle v-for sur Vue JS

J'ai une boucle v-for avec vue.js sur un SPA et je me demande s'il est possible de définir une variable au début puis de l'imprimer à chaque fois que vous en avez besoin, car en ce moment j'appelle une méthode à chaque fois que j'ai besoin de imprimer la variable.

Ce sont les données JSON.

{
"likes": ["famiglia", "ridere", "caffè", "cioccolato", "tres leches", "ballare", "cinema"],
"dislikes":["tristezze", "abuso su animali", "ingiustizie", "bugie"]

}

Ensuite, je l'utilise en boucle:

<template>
<div class="c-interests__item" v-for="(value, key) in interests" :key="key" :data-key="key" :data-is="getEmotion(key)" >

// NOTE: I need to use the variable like this in different places, and I find myself calling getEmotion(key) everythime, is this the way to go on Vue? or there is another way to set a var and just call it where we need it?

<div :class="['c-card__frontTopBox', 'c-card__frontTopBox--' + getEmotion(key)]" ...
<svgicon :icon="getEmotion(key) ...

</div>
</template>

<script>
import interests from '../assets/json/interests.json'
... More imports

let emotion = ''

export default {
  name: 'CInfographicsInterests',
  components: {
    JSubtitle, svgicon
  },
  data () {
    return {
      interests,
      emotion
    }
  },
  methods: {
    getEmotion (key) {
      let emotion = (key === 0) ? 'happy' : 'sad'
      return emotion
    }
  }
}
</script>

// Not relevanty to the question
<style lang='scss'>
.c-interests{...}
</style>

  1. J'ai essayé d'ajouter un accessoire comme: testy = "getEmotion (key)" puis {testy} sans succès ...

  2. J'ai essayé d'imprimer {emotion} directement et cela ne fonctionne pas

Donc, il y a de toute façon à accomplir cela ou devrais-je continuer d'appeler la méthode à chaque fois?

Merci d'avance pour votre aide.

vuejs2v-for
4
ryangus

Ce n'est pas une bonne idée d'utiliser des méthodes à l'intérieur d'un modèle pour des actions non dirigées par l'utilisateur (comme onClicks). C'est particulièrement mauvais, quand il s'agit de performances, à l'intérieur des boucles.

Au lieu d'utiliser une méthode, vous pouvez utiliser une variable calculée pour stocker l'état comme ceci

computed: {
  emotions() {
    return this.interests.map((index, key) => key === 0 ? 'happy' : 'sad');
  }
}

Cela créera un tableau qui renverra les données dont vous avez besoin, afin que vous puissiez utiliser

<div class="c-interests__item"
    v-for="(value, key) in interests"
    :key="key" />`

ce qui réduira le nombre de fois où l'objet sera redessiné.

6
Daniel