How can I combine class with class that has condition? vue.js 2

Question

My vue component is like this :

<template>
    <a class="btn btn-block" :class="[response == 'responseFound' ? ' btn-yellow' : ' btn-default']">
    ...
    </a>
 </template>

It works

But, I want to combine it to be one class

I try like this :

<template>
    <a :class="'btn' [response == 'responseFound' ? ' btn-yellow' : ' btn-default'] ' btn-block'">
    ...
    </a>
 </template>

But it does not work

How can I solve it?

Why do you want to combine them? This is the correct way of doing it. Also it doesn't need to be an array since you only have one class you're setting. — Decade Moon
– Decade Moon, Commented May 3, 2017 at 11:53
Write code like in javascript : :class="'btn ' + ((response == 'responseFound') ? 'btn-yellow' : 'btn-default') + ' btn-block'"> — Happyriri
– Happyriri, Commented May 3, 2017 at 11:57
Yup why do you want to combine, vue does that for you. The first process you followed is the right one. — Vamsi Krishna
– Vamsi Krishna, Commented May 3, 2017 at 11:59

Deepak · Accepted Answer · 2017-05-03 12:00:42Z

4

Everything inside :class or v-bind:class is an expression. So:

<template>
    <a :class="'btn' + ( response == 'responseFound' ? ' btn-yellow' : ' btn-default') + ' btn-block'">
    ...
    </a>
 </template>

answered May 3, 2017 at 12:00

Deepak

1,36212 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Randomtheories · Accepted Answer · 2020-05-27 00:18:37Z

1

You can also combine different binding styles in an array:

<a :class="'btn btn-block', [response == 'responseFound' ? ' btn-yellow' : ' btn-default']">

answered May 27, 2020 at 0:18

Randomtheories

1,29019 silver badges23 bronze badges