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>
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>
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>
