N
Nuxt•2mo ago
ShadowCaster

Bind values to the Pinia getter

What is the correct way to bind the default-value of the RadioGroup to Pinia getter? I have a getter called maritalStatus which returns a string and I would like to map it to the correct radio button.
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @ShadowCaster. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To bind the default value of a Nuxt UI RadioGroup to a Pinia getter (such as maritalStatus), you should use the v-model directive with the value from your Pinia store. The RadioGroup component supports both v-model (for controlled state) and default-value (for uncontrolled, initial state). If you want the RadioGroup to reactively update when the Pinia getter changes, use v-model. Here’s how you can do it: 
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useYourStore } from '~/stores/yourStore'
import type { RadioGroupItem, RadioGroupValue } from '@nuxt/ui'

const yourStore = useYourStore()
const { maritalStatus } = storeToRefs(yourStore)

const items = ref<RadioGroupItem[]>([
  { label: 'Single', value: 'single' },
  { label: 'Married', value: 'married' },
  { label: 'Divorced', value: 'divorced' }
])
</script>

<template>
  <URadioGroup v-model="maritalStatus" :items="items" />
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { useYourStore } from '~/stores/yourStore'
import type { RadioGroupItem, RadioGroupValue } from '@nuxt/ui'

const yourStore = useYourStore()
const { maritalStatus } = storeToRefs(yourStore)

const items = ref<RadioGroupItem[]>([
  { label: 'Single', value: 'single' },
  { label: 'Married', value: 'married' },
  { label: 'Divorced', value: 'divorced' }
])
</script>

<template>
  <URadioGroup v-model="maritalStatus" :items="items" />
</template>
- If you only want to set the initial value and not keep it in sync, you can use the default-value prop instead: <URadioGroup :default-value="maritalStatus" :items="items" /> - For two-way binding (recommended for forms), use v-model as shown above. This approach is consistent with the documented usage of v-model and default-value in Nuxt UI’s RadioGroup component, which expects a string, number, or object as the value, matching your Pinia getter’s return type. When using v-model, changes in the RadioGroup will also update your Pinia store value, provided your getter is backed by a writable state or computed property in your store RadioGroup Usage. If your getter is read-only, you’ll need to bind v-model to a writable state property instead.
Note: The knowledge sources do not explicitly show a Pinia getter used as a v-model or default-value, but the documented API and Vue/Pinia reactivity patterns support this usage.
---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@295226139654488065> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?