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>