vue.js - template - vuetify

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

Question

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?

Answer 1

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'']"

Answer 2

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>