👀 3 Variable Problems

[IT Master]

😊 nice to again meet you 🎉

✔First Problem
const to = toRef(props, 'to') in Anchor.vue
const to = props.to in Button.vue
👀 what is best way to get value from props?

✔Second Problem
const props = defineProps({
type: {
type: String,
default: 'primary'
},
title: {
type: String,
default: undefined
},
text: {
type: String,
default: undefined
}
}) in Alert.vue
👀why do you use default = undefined insteadof string empty?

✔Third Problem
CardTitle.vue

<script lang="ts" setup> defineProps({ text: { type: String, default: '' } }); </script>

**{{ text }}**

why do you use tag with {{ text }}?
I checked that it don't need
right?

[Alfian Dwi Nugraha]

1

for the first problem you can find it directly in the documentation
here
https://vuejs.org/api/reactivity-utilities.html#toref

2

second problem,
i made the default undefined so that when i want to fetch it, then i want to check if the props are filled just by using

if (!prop.title) console.log('prop title not set')

than I have to type

if (prop.title === '') console.log('prop title not set')

3

third problem, it's related to vue component, you can check it in the docs for more details.
basically I made 2 options, namely filling the CardTitle through the property

<CardTitle text="This is title" />

or use slots:

<CardTitle>
    <h1>This is title</h1>
</CardTitle>

When filling using Slots, then {{ text }} will be considered as non-existent. so it just gives the choice to the user.

[IT Master]

Thanks for your kindly solution 👍