Company logo
  • Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Planes
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora

0

55
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
7 months 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>

7 months 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

7 months ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos