vuejs2 - 在 Vue JS 的 v-for 循环中设置一个变量

Question

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

我尝试添加像 :testy="getEmotion(key)"这样的 Prop ，然后 { testy } 没有运气...

我试过直接打印 {emotion} 但它不起作用

那么，无论如何都要完成这个，还是我应该每次都坚持调用该方法？

在此先感谢您的帮助。

Answer 1

将模板内的方法用于非用户控制的操作(如 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" />`

这将减少项目重新绘制的次数。