¿Hay alguna manera de concatenar cadenas con variables en una condición, sin el uso de etiquetas internas como span
u otras que podrían tener v-if
?
En el siguiente ejemplo:
data() { return { useSnippet: true, name: 'John', lastName: 'Doe' } }
El marcado debe mostrar los datos de la siguiente manera:
<div> bunch of text {{useSnippet ? 'Hello {{name}}, your last name is {{lastName}}'}} bunch of text </div>
Esto, por supuesto, está devolviendo un error.
El resultado deseado sería:
bunch of textHello John, your last name is Doebunch of text
Tal vez como el siguiente fragmento:
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>
Como está utilizando el operador de tornería, la sintaxis es así
¿condición? : pero no has usado : por eso supongo que te está dando un error
entonces puedes hacer algo como este montón de texto {{useSnippet ? Hello ${name}, your last name is ${lastName}
: ''}} montón de texto