In my Nuxt 2 project with Nuxt 2 Composition API, I am facing an issue related to displaying items that a user can purchase. Specifically, when a user has previously purchased an item, that item should appear disabled and the checkbox should be checked by default. The API response contains a property called 'has_purchased' which indicates whether the user has bought the item before.
I am struggling to dynamically check the checkboxes based on whether the item has been purchased or not. I have tried various approaches but haven't been successful. Is there a way to make the v-model dynamic so that if 'has_purchased' is true, the checkbox is checked?
Here is a snippet of my single file component:
<template>
<div class="boost">
...
</div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from '@nuxtjs/composition-api'
...
</script>
One important part is in this section where the checkboxes are disabled if 'booster['has_purchased']', and the issue lies with the v-model for the checkboxes:
<input type="checkbox" v-model="isChecked[index]" :disabled="booster['has_purchased']" />
The original binding for isChecked isn't handling 'booster['has_purchased']', and I've tried different methods without success:
const isChecked = ref<boolean[]>(boostersState.boostersIcons.map(() => false))
The 'boostersIcons' array comes from a store and has this structure:
boostersIcons: [
{
id: 'boost-launcher',
icon: require('~/assets/images/upsell/boost/icons/launcher-icon.svg'),
has_purchased: true,
},
...
]
And here is how the API response data looks like after being transformed into a computed property within the component:
[
{
"code": "boost-launcher",
"name": "Launcher",
"price": "12",
"formatted_price": "£12",
"currency_symbol": "£",
"has_purchased": false,
...
},
...
]
If anyone can provide guidance or assistance with resolving this issue, it would be greatly appreciated.