Is there a way to concatenate strings with variables in a condition, without the use of inner tags such as span or other which could have v-if.
In the following example:
data() {
return {
useSnippet: true,
name: 'John',
lastName: 'Doe'
}
}
The markup should display the data as follow:
<div>
bunch of text
{{useSnippet ? 'Hello {{name}}, your last name is {{lastName}}'}}
bunch of text
</div>
This is of course returning an error.
The desired outcome would be:
bunch of textHello John, your last name is Doebunch of text
Maybe like following snippet:
const app = Vue.createApp({
data() {
return {
useSnippet: true,
name: 'John',
lastName: 'Doe'
}
},
computed: {
text() {
return this.useSnippet ? `Hello ${this.name}, your last name is ${this.lastName}` : ''
}
}
})
app.mount('#demo')<script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script>
<div id="demo">
bunch of text
{{ text }}
bunch of text
</div>As you are using the turnery operator the syntax goes like this
condition? : but you have not used : so that is why I guess it is giving you an error
so you can do something like this
bunch of text
{{useSnippet ? Hello ${name}, your last name is ${lastName} : ''}}
bunch of text