Soy nuevo en Quasar Framework y Vue.js Quería usar q-option-group para mi aplicación simple. Sin embargo, model-value y @update:model-value no cambiaron la opción de una a otra. Lo sé, puedo usar v-model pero también puedo usar model-value en lugar de él por la documentación del cuásar.
Solo me pregunto cómo se usa.
HTML
<div id="q-app" style="min-height: 100vh;"> <div class="q-pa-lg"> <q-option-group :model-value="selected_fruit" :options="fruits" color="dark" @update:model-value="value => { selected_fruit = value }" ></q-option-group> </div> </div>VUE
const { ref } = Vue const app = Vue.createApp({ setup () { return { selected_fruit: 'apple', fruits: [ { label: 'Apple', value: 'apple' }, { label: 'Banana', value: 'banana' }, { label: 'Pear', value: 'pear' } ] } } }) app.use(Quasar, { config: {} }) app.mount('#q-app')gracias por las respuestas
Necesitas hacerlo reactivo con ref o reactive :
const { ref } = Vue const app = Vue.createApp({ setup () { const fruits = ref([{label: 'Apple', value: 'apple'}, {label: 'Banana', value: 'banana'}, {label: 'Pear', value: 'pear'}]) const selected_fruit = ref('apple') return { selected_fruit, fruits} } }) app.use(Quasar, { config: {} }) app.mount('#q-app') <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css"> <link href="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.prod.css" rel="stylesheet" type="text/css"> <script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script> <script src="https://cdn.jsdelivr.net/npm/quasar@2.5.5/dist/quasar.umd.prod.js"></script> <div id="q-app" style="min-height: 100vh;"> <div class="q-pa-lg"> <q-option-group :model-value="selected_fruit" :options="fruits" color="dark" @update:model-value="value => { selected_fruit = value }" ></q-option-group> {{ selected_fruit }} </div> </div>