在 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)" 这样的道具，然后 {testy} 但没有成功...
我试过直接打印{emotion}但是不行

那么，有什么方法可以完成这个，还是我应该每次都坚持调用这个方法？

在此先感谢您的帮助。

Answer 1

在模板内使用方法进行非用户控制的操作（如 onClicks）不是一个好主意。在性能方面，内部循环尤其糟糕。

您可以像这样使用计算变量来存储状态，而不是使用方法

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

这将创建一个数组，其中包含 return 您需要的数据，因此您可以使用

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

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

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

Set a variable inside a v-for loop on Vue JS

vuejs2

v-for