Vue JS의 v-for 루프 내에서 변수 설정

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. {emotion}을(를) 직접 인쇄하려고 했는데 작동하지 않습니다.

그럼 이걸 보완할 방법이 있을까요?아니면 매번 메서드를 계속 호출해야 하나요?

아무쪼록 잘 부탁드립니다.

사용자가 지시하지 않은 작업(예: 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" />`

그러면 아이템의 재입고 횟수를 줄일 수 있습니다.

언급URL : https://stackoverflow.com/questions/51387024/set-a-variable-inside-a-v-for-loop-on-vue-js