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

by

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>
👤kissu

Leave a comment