In the parent component, my string variable is being passed down. The constant GET_STARTED is equal to the string "Get Started"
<script setup>
import { GET_STARTED } from '../../constants'
import GreenBtn from '@/components/partials/GreenBtn.vue'
console.log('GET_STARTED', GET_STARTED)
</script>
<template>
<main>
<div class="moon-cta">
<section class="tagline">
<h1>The Bold Portfolio {{GET_STARTED}} Tracker For Brave Crypto Investors</h1>
<h2>Start / continue your crypto investing journey with us.</h2>
<GreenBtn copy={GET_STARTED} url='/sign-up' />
</section>
</div>
</main>
</template>
The partial child component
<script setup>
const props = defineProps(['copy', 'url'])
const { copy, url } = props
console.log('props', props)
const handleGetStartedClick = (msg) => {
console.log(msg)
console.log(`Goto url: ${url}`)
}
</script>
<template>
<button v-on:click="handleGetStartedClick(`${copy} clicked.`)">
{{ copy }}
</button>
</template>
Above, I am expecting the value of copy to be "Get Started"
The result in the UI
copy={GET_STARTED} https://i.stack.imgur.com/6zEEu.png
If I tried copy='GET_STARTED' https://i.stack.imgur.com/2EH6m.png
Expected
https://i.stack.imgur.com/03d7v.png
My logs
https://i.stack.imgur.com/xgsts.png
Any ideas? This method seems to be the correct way to pass string variables in Vue.