Skip to content

Tag: vuejs3

Props are not rendering inside component

I have a simple setup: I have a parent component that passes data using props to a child component. However, when I pass the props to the child component, the data is not filled in. All the tutorials and guides I’ve followed use the same syntax as I’m using, so I must be missing something. I just can’t seem to

How to handle V-show dynamically

I am trying to build an Ecommerce shopping website. I import data from JSON file and by using v-for loop I am able to print data. There is one section in each order that is Show Order Details option, after clicking it one more section called order details will show. I used v-show tag to open the details section. But

Vue3 app on vite can’t compile scss syntax

I can’t use scss nesting syntax. _table.scss table { &.table { width: 100%; } } results in dev tools I imported my _table.scss file into main.scss and main.scss into main.js main.scss main.js Here is my package.json dependencies And my vite.config.js I followed the vite API If I use simple syntax .block .block__item or use scss syntax in vue components –

Access data property of child component from parent vue 3 typescript and composition api

I have setup two components parent and child: App.vue //Parent BookForm.vue //child I’ve followed this thread from vue forum for the solution but I cannot retrieve data from child component into parent component. When I console log console.log(bookRef.value) I get undefined. What is the correct way to get child component’s data with typescript and composition api setup tag ? Answer

Difference between defineProps() and defineProps({ }) syntax?

Actually, I read someone code and they define props using defineProps<({})>() syntax and I research about it and didn’t find anything which helps me to understand about this syntax. How I Define Props How other developer define props I want to know what’s the difference between both syntax. Thanks in Advance I actually don’t know about two different syntax of

Import statements breaks script setup Nuxtjs 3

It seems that when I’m using the import statement in the <script setup> all code below it stops working. I installed the @heroicons package and use the import statement to use it as a component in my <template>. But everything below the import statements does not work anymore. My code: When running the code above I do not see “username”

How to handle the change of the previous object

I’m currently making a nav bar. I create an array storing the info of the tabs in the nav bar. When a new route is clicked it updates the newly clicked tab to allow the current property to be true. How would you change the previous nav item to false. As currently they all change to true one by one