[英]Storybook cant't resolve modules in the project built with Quasar Vue3 Typescript
[英]@update:model-value isn't switching options in q-option-group (Vue3/Quasar)
我是Quasar Framework
和Vue.js
的新手。 我想將q-option-group
用於我的簡單應用程序。 但是,model-value 和 @update:model-value 沒有將選項從一個切換到另一個。 我知道,我可以使用v-model
但我也可以使用模型值而不是類星體文檔中的它。
我只是想知道它是如何使用的。
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')
謝謝你的回答
您需要使其與ref
或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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.