0

estoy desarrollando una especie de aplicación con opcion de cambiar el estilo de acuerdo al gusto del usuario, no obstante recientemente me está pasando que en definitiva no puedo lograr la interpolación en la clase dinamica en cuestión en todos los casos, por ejemplo

//en estos casos si funciona, en este caso le estoy pasando los datos desde el componente padre con props de Vuex

<nav  :class="`NavS : !${tieneuntema}, ${tema.estilonavbar} : ${tieneuntema} `">

<div class="column ">
   <a href="#" :class="`green : !${tieneuntema}, ${tema.estiloiconos} : ${tieneuntema} `" @click="messages" >
      <span>
   <i class="fas fa-envelope fa-lg"></i>
   {{notisend.length}}
   </span>
   </a>
 </div>
 
 //en este caso funciona directamente desde el componente padre
 
 <span id="contador" :class="`'help is-success' : !${tieneuntema}, 'help is-${tema.estilopagina}' : ${tieneuntema} `" >
 {{remainingCount}}
 </span>
 
 //Aquí ya definitivamente no funciona , intenté ponerlo de varias formas sin ningún exito
 
 <div v-if="cargandopost == false" :class="`'file is-success is-fullwidth' : !${tieneuntema}, 'file is-${tema.estilopagina}' : ${tieneuntema}`">
 
 //Y se que no tiene nada que ver con el nombre de la clase por que luego la llamo aquí desde el data y funciona
 
 <div :class="`file is-${apariencia} is-fullwidth`">

¿Alguien tendrá alguna idea de como puedo utilizar las clases dinamicas en estos casos?

Muchas gracias de ante mano!

//Mi Vuex
export const strict = false
export const state = () => ({
  
    currentuser:{},
    following: [],
    goals: [],
    tieneuntema: false,
    tema: []
  })
  
  export const actions = {
    getusuario ({commit}){
        this.$axios.get('/account/me')
                    .then(response => {
                        let currentuser = response.data.data
                        let following = response.data.data.following
                        let goals = response.data.data.goals
                        commit ('set_following', following)
                        commit('set_currentuser', currentuser)
                        commit('set_goals', goals)

                        if (response.data.data.currentheme !== null){
                        let tieneuntema = true
                        let tema = response.data.data.currentheme
                        console.log(tieneuntema)
                        console.log(tema)
                        commit('tiene_tema', tieneuntema)
                        commit('set_tema', tema)
                        } else {
                          let tieneuntema = false
                          let tema = {}
                          console.log(tieneuntema)
                          commit('tiene_tema', tieneuntema)
                          commit('set_tema', tema)
                        }
  
                    })
    }
        
  }

  export const mutations = {
    set_currentuser(state, currentuser){
        state.currentuser = currentuser
    },
    set_following(state, following){
      state.following = following
  },
  set_goals(state, goals){
    state.goals = goals
  },
  tiene_tema(state, tieneuntema){
    state.tieneuntema = tieneuntema
  },
  set_tema(state, tema){
    state.tema = tema
  }
 
    
 }

llamo al mapstate de vuex en el created del componente padre no obstante creo que el problema está más bien en mi manera de intentar usar las propiedades en las clases dinamicas

1 respuesta 1

0

Hola! Después de buscar la solución que encontré fue dejar de usar la interpolación con las comillas invertidas y crear un array con las clases completas en vueX y hacerles un commit

async gettema({commit}){
        await this.$axios.get('/theme/currentheme')
        .then(response => {
          if (response.data.data !== null){

          let respuesta= response.data.data
          let tieneuntema = true

          let tema = {background : respuesta.background,
          colortexto: 'has-text-'+respuesta.colortexto,
          estilonavbar: respuesta.estilonavbar,
          estiloiconos: respuesta.estiloiconos,
          estilohelp: 'help is-'+respuesta.estilopagina,
          estilotextarea: 'textarea is-'+respuesta.estilopagina+' is-large',
          estilobuttonindex: 'button is-'+respuesta.estilopagina+' is-normal',
          estilofileindex: 'file is-'+respuesta.estilopagina+' is-fullwidth',
          background: respuesta.background, 
          userbox:respuesta.userbox, 
          postbox: respuesta.postbox,
          estilotexto: 'has-text-'+respuesta.colortexto,
          buttons: 'button is-'+respuesta.estilopagina,
          buttonfullwidth: 'button is-'+respuesta.estilopagina+' is-fullwidth',
          file:'file is-'+respuesta.estilopagina,
          filesmall:'file is-'+respuesta.estilopagina+' is-small'}
          
          commit('tiene_tema', tieneuntema)
          commit('set_tema', tema)

          } else {
            let tieneuntema = false
            let tema = {}
            console.log(tieneuntema)
            commit('tiene_tema', tieneuntema)
            commit('set_tema', tema)
          }

        })
      

Posteriormente llamar a la clase con interpolación con arrays en esta forma

:class="[ tieneuntema ? tema.buttons : 'button is-success' ]"

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.