0

Bom dia/tarde / noite

Estou com uma duvida, tenho um projeto onde possuo uma classe dinâmica com operadores ternários, preciso adicionar outra classe dinâmica para trazer uma classe a mais nessa brincadeira toda, porem retorno sempre me da um erro de "syntaxe error" não consigo fazer ela funcionar pois não entendo como fazer o bind corretamente desse operador.

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

EDIT:

A ideia é adicionar uma classe dinâmica nova, no caso sem interferir na operação que está sendo feita no 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">

porem adicionando ali o ServicoPagante, ele me da erro de sintaxe porque anterior a ele está rolando uma operação com ternário que está correta porem preciso adicionar mais essa classe para outra validação

4
  • Quais classes que vc que associar?
    – LeAndrade
    Commented 15/10/2019 às 19:29
  • Queria usar dinamicamente essa servicoPagamento, porem ela nao rola por causa do ternario anterior que está rolando Commented 15/10/2019 às 19:38
  • Então vc tem 3 conjunto de classes: 1 - card-servico servico-valor servico-edit, 2 - card-servico e 3 - servicoPagante, vc quer fazer a condição para que seja qual? Tá bem confuso.
    – LeAndrade
    Commented 15/10/2019 às 19:48
  • Tirando servicoPagante, as outras funcionam, quero fazer servivoPagante funcionar sem interferir nessas anteriores, ela seria a classe nova porem nao funciona devido ao ternario. Creio que nao estou sabendo adicionar ela sem interferir nas anteriores Commented 15/10/2019 às 19:58

1 Resposta 1

2

Cria uma computed property que faça essa lógica. Na API do Vue podes retornar uma array com strings e objetos (parecido com o que estás a fazer no template), e ficaria assim:

No template:

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

No componente ficaria:

computed: 
    classesCardServico(){

     return [
        'card-servico', 
        {'servico-valor': this.edit},
        {'servico-edit': this.edit},
        {'servicoPagante': this.servicoPagante.assinante }
      ];
    }
14
  • Editei meu comentario porque ficou muito confuso minha duvida, a operação ternaria vai rolar porem preciso adicionar mais 1 classe dinamica fazendo outra função sem interferir diretamente nessa opreção Commented 16/10/2019 às 11:43
  • @leonardosilva qual é a logica de servicoPagante? Só tem uma chave "pudim"? pode haver mais chaves? podes explicar melhor?
    – Sergio
    Commented 16/10/2019 às 13:34
  • posso sim, vai haver 1 variavel onde dependendo de uma API retornar 1 valor true ou false vai adicionar 1 classe ou remover essa classe, no caso ServicoPagante, a ideia que a classe seja dinamica para o retorno da api falar se é valido ou não e se isso pode receber 1 estilo ou não Commented 16/10/2019 às 14:13
  • @leonardosilva então o valor que decide se a classe deve ser adicionada ou não é this. servicoPagante.pudim?
    – Sergio
    Commented 16/10/2019 às 14:49
  • sim o pudim é só uma maneira deu ficar testando se a classe ta funcionando, seria algo como this.servicoPagante.free || this.servicoPagante.assinante Commented 16/10/2019 às 15:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .