Use variable in condition Vue JS

Question

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

Answer 1

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

Answer 2

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/[email protected]/dist/vue.global.prod.js"></script>
<div id="demo">
  bunch of text
  {{ text }}
  bunch of text
</div>