Merge pull request #7555 from hassnian/nuxt/issue-004

fix: minting Settings not persistent after page refresh or navigating around the page

components/settings/Minting.vue

@@ -4,14 +4,14 @@
  {{ $t('Minting Settings') }}
  </div>
  <div class="py-2 is-flex">
- <Support :value="hasSupport" :show-price="false" />
+ <Support v-model="hasSupport" :show-price="false" />
  <NeoTooltip :label="$t('support.tooltip')" position="bottom" multiline>
  <NeoIcon icon="info-circle" />
  </NeoTooltip>
  </div>
  <div class="py-2 is-flex">
  <Support
- :value="hasCarbonOffset"
+ v-model="hasCarbonOffset"
  :price="1"
  :active-message="$t('carbonOffset.carbonOffsetYes')"
  :passive-message="$t('carbonOffset.carbonOffsetNo')" />

components/shared/Support.vue

@@ -2,7 +2,9 @@
  <NeoSwitch v-model="model" :type="type" :rounded="false">
  <div class="is-flex is-align-items-center">
  <span class="mr-2">
- {{ value ? `${$t(activeMessage)}${priceString}` : $t(passiveMessage) }}
+ {{
+ modelValue ? `${$t(activeMessage)}${priceString}` : $t(passiveMessage)
+ }}
  </span>
  <slot name="tooltip" />
  </div>
@@ -15,12 +17,12 @@ import { NeoSwitch } from '@kodadot1/brick'
 
 const props = withDefaults(
  defineProps<{
- value: boolean
+ modelValue: boolean
  showPrice?: boolean
  price?: number
- activeMessage: string
- passiveMessage: string
- type: string
+ activeMessage?: string
+ passiveMessage?: string
+ type?: string
  }>(),
  {
  showPrice: true,
@@ -30,10 +32,7 @@ const props = withDefaults(
  type: '',
  },
 )
-const emit = defineEmits(['input'])
+
+const model = useVModel(props, 'modelValue')
 const priceString = ref(props.showPrice ? ` ($ ${round(props.price)})` : '')
-const model = computed({
- get: () => props.value,
- set: (value: boolean) => emit('input', value),
-})
 </script>