• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Evaluaciones
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

161
Vistas
Use variable in condition Vue JS

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
almost 3 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

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>

almost 3 years ago · Juan Pablo Isaza Denunciar

0

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

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda