Vue.js 3 SFC Prop

Question

When I use a prop in SFC the prop shows empty, or as you prefer it does not show.

I have an ActionButton.vue file:

<script setup> defineProps({ actionButtonOne: { type: String } }) </script> <template> <button type="button">{{ actionButtonOne }}</button> </template>

And I am importing it to CardElement.vue:

<script setup> import ActionButton from './ActionButton.vue' defineProps({ singleItem: { type: String } }) </script> <template> <ul> <li>{{ singleItem }} <ActionButton>Remove</ActionButton></li> </ul> </template>

But when I look in the browser, my Buttons are empty, just a rectangle without "Remove" description. Why is this and what can I do to fix it?

Boussadjra Brahim · Accepted Answer · 2024-01-16 13:24:05Z

You can directly use slot to pass content or pass a value for the defined prop :

<script setup> import ActionButton from './ActionButton.vue' defineProps({ singleItem: { type: String } }) </script> <template> <ul> <li>{{ singleItem }} <ActionButton action-button-one="Remove" ></ActionButton></li> </ul> </template>

Collectives™ on Stack Overflow

Vue.js 3 SFC Prop

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related