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}却没有运气...
我尝试直接打印{情感}，但它不起作用

因此，无论如何都要完成此操作，还是我应该每次都坚持调用该方法？

在此先感谢您的帮助。

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" :data-key="key" :data-is="emotions[key]" >

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

在Vue JS

1 个答案: