Ionic/Vue add one Class to the Others

Hello Community,

is it possible to add one class to a classList and not to remove the whole whole classList?

At the moment i use:

v-bind:class="[isActive ? ‘md tab-has-label tab-has-icon tab-layout-icon-top ion-activatable ion-selectable ion-focusable tab-selected’ : ‘md tab-has-label tab-has-icon tab-layout-icon-top ion-activatable ion-selectable ion-focusable’]"

You mean something like this?

<div
  class="md tab-has-label tab-has-icon tab-layout-icon-top ion-activatable ion-selectable"
  :class="{
    'ion-focusable': isActive
  }"
/>

Hi @F1R3ON, I don’t get u point. Can you make the question details, please?

Hi @whitersun,

i’m searching for a method to add a className to a class but not to delete the whole class.

I’m using at the moment v-bind:class because if a boolean is true then add a className to the class and if it false then remove the className of the class. This works but i think it maybe exist a better method instead to write the whole classNames because i want only add one className and remove one className if a boolean is false then remove if its true then add the className.

Isn’t what @tho-masn said what you want?

Vue’s documentation (link):

You can have multiple classes toggled by having more fields in the object. In addition, the :class directive can also co-exist with the plain class attribute. So given the following template:

<div
  class="static"
  :class="{ active: isActive, 'text-danger': hasError }"
></div>

No it don’t do the correct thing…

It always remove the whole classes.

I want to check with a boolean to add a classname and if the boolean is wrong then remove and dont add again the classname…

if i do it like this:
:class="[isActive ? activeClass : ‘’]
it adds the classname but in the other way it remove the other classes on the object…

Interesting. Can you share your full code? Please use code blocks to make it easier for us to read.

Here is a some plain Vue code that works just fine.

<template>
  <h1 class="h1"
      :class="{ active: isActive }"
      @click="isActive = !isActive">
    {{ msg }}
  </h1>
</template>

<style>
  .h1 {
    text-decoration: underline;
  }
  
  .active {
    color: red;
  }
</style>

<script setup>
import { ref } from 'vue'

const msg = 'Hello World!'
let isActive = ref(false)
</script>