The parent component has data that I want to pass to the child component. For example, I created such a component with data. Parent component <template> <NameUser :data="userData"></NameUser> <div>first name: {{ userData.firstName }}</div> <div>last name: {{ userData.lastName }}</div> </template> <script…
I need to make a composable universal. Here's my case, I have 3 components - ItemSwiper, ItemCard and ViewRecipeDetail. ItemSwiper contains card slides and it is the parent of ItemCard. ItemSwiper has a loop of recipes: <Slide v-for="recipe in storeRecipe.data"…
I am using vue and quasar and have this component: <template> <q-layout> <q-page-container style="background-color: #e0e5ea;"> <q-page class="column"> <menu-bar></menu-bar> <div class="q-ma-lg row col"> <q-card flat class="col" style="border-radius: 9px;"> <q-card-section> </q-card-section> </q-card> <q-card flat class="col q-ml-lg " style="border-radius: 9px"> <q-card-section> </q-card-section> </q-card>…
on the vue3 page below I have integrated a player that shows a "play" icon when the player is stopped, and a "pause" icon when it's playing. What I am now trying to do is to let the player repeat…
I have view with from and to date along with some branch,spareparts as drop down when i select from and to date it will retrive some data along with branch name,grand total etc.what i am trying to do is i…
In a Nuxt3 project, I'm using v-model on a component. According to the Vue docs, this is how to do it: In the parent component: <MyInput v-model="myData" placeholder="My placeholder" /> In the child component <template> <div class="my-input"> <input :value="modelValue" @input="$emit('update:modelValue',…
enter image description here How can I prevent any user from opening disabled input in the browser? Is there an easy way to do this or what should I do? I use Vuejs in my project I need to do…
I trying do import globally an variables.scss file my vue.config.js like the following: module.exports = { css: { loaderOptions: { scss: { additionalData: `@import "@/styles/variables.scss";` }, } } } variables.scss $dark-bg: #1C2537; and vue file where i try use it…
I want to change group label of vuetify data-table. For earlier versions of Vuetify below the code was working fine but now it doesn't work. <va-data-table-server :items-per-page="50" :group-by="groupBy" row-create row-clone row-edit disable-edit disable-show disable-clone disable-create-redirect > <template v-slot:column.data-table-group> </template> </va-data-table-server>…
I am developing a vue-component based on vue-select within which I am adding a custom info Icon, on click of the Icon I want to trigger my custom method getInfo but for some reason clicking on it does not trigger…