How to use more than 1 dynamic class with vuejs?

Question

Good morning/afternoon / evening

I have a doubt, I have a project where I have a dynamic class with ternary operators, I need to add another dynamic class to bring an extra class in this whole joke, but return always gives me an error of "syntax error" I can’t make it work because I don’t understand how to bind this operator correctly.

<div :class=" edit ? 'card-servico servico-valor servico-edit' : 'card-servico'" v-show="!tour || ei === 0">

EDIT:

The idea is to add a new dynamic class, in case without interfering with the operation being done on Edit.

data(){
 return {
   servicoPagante: {
      'pudim': true
    },
  }
}

<div v-on:click="edit ? :class=" edit ? 'card-servico servico-valor servico-edit' : 'card-servico', 'servicoPagante' :true " v-show="!tour || ei === 0">

but adding Servicopagante there, it gives me syntax error because prior to it is rolling an operation with ternary that is correct but precise add plus this class for another validation

Answer 1

Creates a computed Property make this logic. In the Vue API you can return an array with strings and objects (similar to what you are doing in the template), and it would look like this:

In the template:

<div :class="classesCardServico" v-show="!tour || ei === 0">

In the component would be:

computed: 
    classesCardServico(){

     return [
        'card-servico', 
        {'servico-valor': this.edit},
        {'servico-edit': this.edit},
        {'servicoPagante': this.servicoPagante.assinante }
      ];
    }