Utilizing v-for to generate multiple <p> elements, each one animating in within a Vue <transition> component if the v-if condition is met. Below is the code snippet:
<transition name="fade">
<p
v-for="(quote, idx) in game.quotes" <-- game.quotes is sourced from VUEX
:key="`game-quote-${idx}`"
class="quote-box__current_quote"
v-if="game.currentQuoteIdx === idx"
>"{{ quote.content }}"</p>
</transition>Encountering ESLINT errors due to the vue/no-use-v-if-with-v-for rule.
Research led me to the Vue style guide: https://v2.vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential, suggesting to avoid combining v-for and v-if on the same element. I aim to achieve individual animations using the <transition> wrapper (displaying only one <p> at a time). Is there a better approach that doesn't involve pairing v-if with v-for?
Additionally, facing an issue related to game.quotes in
v-for="(quote, idx) in game.quotes"The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.game.quotes originates from Vuex and doesn't require filtering. Why does ESLINT suggest creating a computed property to return a filtered array?
VIEW ON GITHUB - Line 10