Estoy tratando de vincular un atributo y varias clases de viento de cola a un elemento html. Esto es para un menú de pestañas, por lo que la idea es que para la pestaña "activa" tome el título dinámicamente e inyecte también algunas clases de viento de cola para cambiar la apariencia de las pestañas "activas".
<li :class="{ selected: title === selectedTitle, selected ? ['border-b-2', 'border-blue-700' ] }" @click.stop.prevent="selectedTitle = title" v-for="title in tabTitles" :key="title" role="presentation" >De momento no me funciona el código anterior.
Intenta lo siguiente:
new Vue({ el: "#demo", data() { return { tabTitles: ['aaa', 'bbb', 'ccc'], selectedTitle: '' } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" integrity="sha512-wnea99uKIC3TJF7v4eKk4Y+lMz2Mklv18+r4na2Gn1abDRPPOeef95xTzdwGD9e6zXJBteMIhZ1+68QC5byJZw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div id="demo"> <li :class=" selectedTitle === title ? 'border-b-2 border-blue-700' : '' " @click.stop.prevent="selectedTitle = title" v-for="title in tabTitles" :key="title" role="presentation" >{{title}}</li> </div>Desde mi punto de vista, la siguiente línea no puede funcionar:
selected ? ['border-b-2', 'border-blue-700' ]Este es un caso corto de if else sin else. Creo que mencionas escribir algo como esto:
<li :class="{ 'selected border-b-2 border-blue-700': title === selectedTitle, }">