CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
AnchovyLegend
AnchovyLegend

Reputation: 12538

Combining conditional and non-conditional classes in vue

I need to set a class using vue the value in a vue param. Additionally, I need to conditionally set a class based on if a vue param is a certain value. Is it possible to combine the two below functionalities in to one class assignment?

<button :class="'btn btn-primary modal modal-' + modal.id" 
        :class="{'modal-active' : modal.active}">
</button>

Upvotes: 4

Views: 932

Answers (2)

alexanderdavide
alexanderdavide

Reputation: 1675

A more modern approach would be using the computed property to construct an array of class names:

<template>
  <button :class="classNames"></button>
</template>

<script setup>
const classNames = computed(() => ['btn', 'btn-primary', 'modal', `modal-${model.id}`, modal.active && 'modal-active']);
</script>

Upvotes: 0

Boussadjra Brahim
Boussadjra Brahim

Reputation: 1

You could do it as follows by using an array :

   <div v-bind:class="[{'modal-active' : modal.active}, 'btn btn-primary modal modal-' + modal.id]"></div>

Upvotes: 6

Related Questions