I'm using a library but I got Close {{myVar}} printed on the screen. How do I use template literal in vue? I'm coming from react jsx background.
<template>
<a-alert message="Info Text" type="info" close-text="Close {{myVar}}" />
{{myVar}} /* it works here */
</template>
In vue, you can use variate like this:
<template>
<a-alert message="Info Text" type="info" :close-text="myVar" />
{{myVar}} /* it works here */
</template>
// combine with other text
<template>
<a-alert message="Info Text" type="info" :close-text="`Close ${myVar}`" />
{{myVar}} /* it works here */
</template>
In your code you're passing prop close-text as text. For passing values other than text you need to put : as prefix, like :prop="value".
More info about this: https://vuejs.org/v2/guide/components-props.html
Solution for your problem would be:
<template>
<a-alert message="Info Text" type="info" :close-text="`Close ${myVar}`" />
{{myVar}} /* it works here */
</template>
You can use only one tag in root component.