vuetify vue template style keep data component alive vue.js vuejs2 vue-component

vue.js - template - vuetify



¿Cómo puedo agregar condición en clase en vue.js 2? (2)

Simplemente elimine los corchetes en :class :

<template> <a href="javascript:" class="btn btn-block" :class="product == ''responseFound'' ? '' btn-default'' : '' btn-success''" @click="add($event)"> ... </template>

Si desea agregar más condiciones, envuélvala con [] para crear una matriz:

:class="[product == ''responseFound'' ? '' btn-default'' : '' btn-success'', foo ? ''foo'' : ''bar'']"

Mi componente vue es así:

<template> <a href="javascript:" class="btn btn-block" :class="{ product == ''responseFound'' ? '' btn-default'' : '' btn-success'' }" @click="add($event)"> ... </template>

Existe un error:

expresión inválida:: class = "{product == ''responseFound''? ''btn-default'': ''btn-success''}"

¿Cómo puedo resolverlo?


Usaría una propiedad calculada para este tipo de comportamiento.

Lo cual elimina la lógica de su plantilla y la mueve a la parte del script.

<template> <a href="javascript:" class="btn btn-block" :class="classes" @click="add($event)"> </template> <script> export default { computed: { classes() { return this.product == ''responseFound'' ? ''btn-default'' : ''btn-success'' } } } </script>