How do I pass a prop as an argument in Vue.js

Issue

I am new to Vue and I am making a component that changes it's class property based on the style prop given by the parent component. When I try to invoke a substitution Vue does nothing

Here is "Top.vue", the title prop is passed and the button renders it fine, however the href and style props don't

<script setup lang="ts">
import Button from './Button.vue'
</script>

<template>
<div class=flex>
<Button href="test" title="Home" alt="To home" style="top" />
</div>
</template>

Here is "Button.vue"

<script setup lang="ts">
defineProps({
    href: String,
    title: String,
    alt: String,
    style: String
})
</script>

<template>
<a href="{{ href }}"><button class="{{ style }}">{{ title }}</button></a>
</template>

I want for Vue to resolve this to

<a href="test"><button class="top">Home</button></a>

However it resolves to

<a href="{{ href }}"><button class="{{ style }}">Home</button></a>

Notice how {{ title }} resolves properly but {{ href }} and {{ style }} do not

Solution

<button> element name, style attribute, etc. are reserved words. You should come up with custom names for your props and components rather than reuse standard HTML attribute/element names.

Regarding your prop troubles, review the documentation on how to use props. Binding prop values to elements is done with v-bind or just : for short, e.g. :href="test". The double curly braces {{ }} is for text interpolation and should be used between element tags when you're trying to display a value.

Try this code instead:

<script setup lang="ts">
import StyledButton from './StyledButton.vue'
</script>

<template>
  <div class=flex>
    <StyledButton link="test" title="Home" altText="To home" classStyle="top" />
  </div>
</template>

<script setup lang="ts">
defineProps({
    link: String,
    title: String,
    altText: String,
    classStyle: String
})
</script>

<template>
  <a :href="link">
    <button :class="classStyle">{{ title }}</button>
  </a>
</template>

Answered By - yoduh