There are two checkboxes available: 'Show Active' and 'Show Live'. Initially, the 'Show Live' checkbox is disabled.
I need a feature where if 'Show Active' is checked, it will enable the 'Show Live' checkbox. And if 'Show Active' is unchecked, the 'Show Live' checkbox should be unchecked and disabled as well.
Below is the code snippet for reference:
<div id="q-app">
<q-checkbox left-label v-model="searchForm.active" label="Show Active"></q-checkbox>
<q-checkbox left-label v-model="searchForm.live" label="Show Live"></q-checkbox>
</div>
<script>
const {
useQuasar
} = Quasar
const {
ref,
onMounted,
reactive
} = Vue
const app = Vue.createApp({
setup() {
const $q = useQuasar()
const searchForm = reactive({
active: false,
live: false
});
function notify() {
$q.notify('Running on Quasar v' + $q.version)
}
return {
notify,
searchForm
}
}
})
app.use(Quasar, {
config: {}
})
app.mount('#q-app')
</script>
https://jsfiddle.net/ubjsf2zv/10/
I am just beginning to learn vue.js and quasar framework