I am currently working with Quasar VueJS and I have a requirement to add a button on my navbar that will trigger a pop-up dialog settings panel. This settings panel will be used for various functionalities such as dynamic theming, although that is somewhat off-topic.
However, I am facing significant challenges in trying to implement this feature.
"layouts/MainLayout.vue"
<template>
<q-btn
unelevated
icon="settings"
label="Settings"
color="primary"
v-on:click="SetterUpper"
/>
</template>
<script>
import SetterUpper from "components/SetterUpper";
export default {
name: "MainLayout",
Component: {
SetterUpper
},
};
</script>
"components/SetterUpper.vue"
<template>
<q-dialog v-model="SetterUpper" persistent>
<q-card>
<q-card-section class="row items-center">
<q-avatar icon="settings" color="primary" text-color="white" />
<span class="q-ml-sm">Placeholder</span>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Cancel" color="primary" v-close-popup />
<q-btn flat label="Save" color="primary" v-close-popup />
</q-card-actions>
</q-card>
</q-dialog>
</template>
<script>
export default {
name: "SetterUpper",
};
</script>