web-dev-qa-db-ja.com

Vue JSのv-forループ内に変数を設定します

私はSPAにvue.jsのv-forループがあり、最初に変数を設定して、必要なときにいつでもそれを出力することは可能かどうか疑問に思っています。変数を出力します。

これはJSONデータです。

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

}

次に、ループで使用します。

<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. ：testy = "getEmotion（key）"のような小道具を追加してみましたが、運が悪くて{testy} ...

  2. {感情}を直接印刷してみましたが、うまくいきません

だからとにかくこれを達成する方法はありますか、それとも毎回メソッドを呼び出し続ける必要がありますか？

助けてくれてありがとう。

vuejs2v-for
4
ryangus

（onClicksのような）ユーザー主導でないアクションのテンプレート内でメソッドを使用することは良い考えではありません。ループに関しては、パフォーマンスに関しては特に悪いです。

メソッドを使用する代わりに、計算された変数を使用して状態を保存することができます

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

これにより、必要なデータを返す配列が作成されるので、

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

これにより、アイテムが再描画される回数が減ります。

6
Daniel