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

Nikola Pavicevic · Accepted Answer · 2022-03-09 17:19:11Z

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>

edited Mar 9, 2022 at 17:19

answered Mar 9, 2022 at 17:11

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

prettyInPink Over a year ago

Thanks, but this uses inner tags, span, in this case, as mentioned in the question, I really want to avoid tags.

prettyInPink Over a year ago

This works, but was more looking for inline, like answer provided below. Thanks!

Nikola Pavicevic Over a year ago

You are welcome mate, btw you should avoid logic in template.

Bhumit 070 · Accepted Answer · 2022-03-09 17:20:10Z

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

edited Mar 9, 2022 at 17:20

answered Mar 9, 2022 at 17:12

Bhumit 070

4264 silver badges16 bronze badges

4 Comments

prettyInPink Over a year ago

No, this will not fix it, I had used this as well before, :null

Bhumit 070 Over a year ago

please check updated answer

Bhumit 070 Over a year ago

codesandbox.io/s/stupefied-bush-52gpq2?file=/src/App.vue

prettyInPink Over a year ago

Strange, I had used string literals before, and returned error, so stepped away from that. But this is the approach I was after. Thanks!

Collectives™ on Stack Overflow

Use variable in condition Vue JS

2 Answers 2

3 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related