Nuxt3: Why are selected radio buttons not shown when using in a layout component?

Question

I am using custom page layouts for my nuxt3 app. When user selects a radio option, the URL changes to reflect the change (ie, 'solved', 'unsolved' radio options). This works good, however, the radio buttons are not shown for the checked item. For example, when user presses "solved tickets" radio option, the radio button is not shown for that item. What am I doing wrong?

components/AppFilter.vue

<template>
  <section>
    <div class="list-group">
      <NuxtLink to="/" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="all"
          id="firstRadio"
        />
        <label class="form-check-label" for="firstRadio"
          >All tickets/index page</label
        >
      </NuxtLink>
      <NuxtLink to="/solved" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="solved"
          id="secondRadio"
        />
        <label class="form-check-label" for="secondRadio">Solved Tickets</label>
      </NuxtLink>
      <NuxtLink to="/unsolved" class="list-group-item list-group-item-action">
        <input
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="unsolved"
          id="thirdRadio"
        />
        <label class="form-check-label" for="thirdRadio"
          >Unsolved Tickets</label
        >
      </NuxtLink>
    </div>
    {{ picked }}
  </section>
</template>

Stackblitz reproduction: https://stackblitz.com/edit/nuxt-starter-dmx5zu?file=components/AppFilter.vue

score 1 · Answer 1 · answered Nov 08 '22 at 13:14

1

Pretty funky structure IMO but that one works fine

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const picked = ref([])
const updateRadioAndMove = ({ radio, newPath }) => {
  picked.value = radio.target.value
  router.push(newPath)
}
</script>

<template>
  <section>
  <br/>
    picked radio button >> {{ picked }}
    <br/>
    <br/>
    
    <div class="list-group">
        <input
          @change="updateRadioAndMove({ radio: $event, newPath: '/' })"
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="all"
          id="firstRadio"
        />
        <label class="form-check-label" for="firstRadio"
          >All tickets/index page</label
        >
        <input
          @change="updateRadioAndMove({ radio: $event, newPath: '/solved' })"
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="solved"
          id="secondRadio"
        />
        <label class="form-check-label" for="secondRadio">Solved Tickets</label>
        <input
          @change="updateRadioAndMove({ radio: $event, newPath: 'unsolved' })"
          class="form-check-input me-1"
          type="radio"
          name="listGroupRadio"
          value="unsolved"
          id="thirdRadio"
        />
        <label class="form-check-label" for="thirdRadio"
          >Unsolved Tickets</label
        >
    </div>
  </section>
</template>

answered Nov 08 '22 at 13:14

kissu

40,416
14
65
133

Thanks @kissu, that does seem like over kill. Is there not a better and more simpler way to achive my desired output? Maybe I am overthinking this layout thing. – redshift Nov 08 '22 at 13:25
@redshift I mean, I'm not sure why you want some checkboxes + page change. One seems enough to me (page change). But maybe it's required by your project? Just looks wrong from a design aspect to have something like that. But the given solution works fine if this is what you want to have in your project. – kissu Nov 08 '22 at 13:29
I am trying to achieve what nuxt modules website does with the sorting . When you click "nuxt 3" the page query is sent to URL address and the data is updated: https://modules.nuxtjs.org/?version=3.x – redshift Nov 08 '22 at 14:04
1

@redshift that one is a matter of [pushing a `query`](https://router.vuejs.org/guide/essentials/navigation.html#navigate-to-a-different-location) + [watching the `$route`](https://stackoverflow.com/a/71685443/8816585). – kissu Nov 08 '22 at 14:14
I think I simplified it: https://stackblitz.com/edit/nuxt-starter-svj471?file=README.md . Now I just need to conver to radio buttons! – redshift Nov 08 '22 at 14:15
@redshift that one is also a better/simpler approach. – kissu Nov 08 '22 at 14:17

Nuxt3: Why are selected radio buttons not shown when using in a layout component?

1 Answers1

Linked