I have a challenge where I need to replace a specific string with a condition before it is displayed in the output.
Check out my code snippet below:
<script setup>
import { ref } from 'vue'
const items = ref([{ letter: "A", message: '1' }, { letter: "B", message: '2' }])
</script>
<template>
<li v-for="(item, index) in items">
<p v-if="item.message === '1'">
{{ item.letter }} - {{ 'Apple' }}
</p>
<p v-if="item.message === '2'">
{{ item.letter }} - {{ 'Banana' }}
</p>
</li>
</template>
I attempted placing the v-if inside the v-for, but this approach seems unfeasible. I am exploring ways to dynamically change the value of item.message before rendering it using v-for. Any ideas or suggestions on how to achieve this?