My component vue is like this :
<template>
<a href="javascript:" class="btn btn-block" :class="{ product == 'responseFound' ? ' btn-default' : ' btn-success' }" @click="add($event)">
...
</template>
There exist error :
invalid expression: :class="{ product == 'responseFound' ? ' btn-default' : ' btn-success' }"
How can I solve it?
Simply remove the brackets in :class:
<template>
<a href="javascript:" class="btn btn-block" :class="product == 'responseFound' ? ' btn-default' : ' btn-success'" @click="add($event)">
...
</template>
If you want to add more conditions, wrap it with [] to create an array:
:class="[product == 'responseFound' ? ' btn-default' : ' btn-success', foo ? 'foo' : 'bar']"
I would use a computed property for this kind of behaviour.
Which removes the logic from your template, and moves it into your script part.
<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>
