0

Estoy validando 5 hints de un password. La logica es la siguiente: Si todas las validaciones son correctas, los iconos de los hints son de color1, sino de color2. PERO si solo 4 hints son correctos, el hint restante en vez de ser color2, tiene que ser color3.

Mi codigo hasta ahora:

<v-icon small v-if="tips[tip]" color='#71227D'>mdi-check-circle</v-icon>
<v-icon small v-else color="error">mdi-close-circle</v-icon>

Intente un <v-if> dentro del <v-else> pero no funciona. Como podria hacer?

2
  • Puedes utilizar v-else-if pero si tus condiciones cambiaran mucho te recomiendo utilizar v-show Revisa esta informacion
    – Bardales
    Commented el 7 abr. 2020 a las 20:19
  • Estás complicando demasiado tu vista llenándola de lógica, prueba mover esto a la instancia de vue y manejarlo tal vez por medio de watchers
    – user128299
    Commented el 7 abr. 2020 a las 20:26

1 respuesta 1

0

Puedo ver que estas utilizando vuetify, te doy algunos ejemplos utilizando una forma mas entendible para que observes el componente.

Existen un problema y es que v-if como como se expresa en la documentación de VUE en v-if vs v-show, v-if tiene costos de alternancia más altos por lo que puede perderse el cambio de un dato si este es comprometido, v-if es optimo para la renderización inicial del componente, ya que solo se utilizaría correctamente si este dato no cambiará constantemente. Por lo que seria mas adecuado utilizar v-show ya que este solo modifica la propiedad display del estilo de la etiqueta. Mas sin embargo parece que estas utilizando un dato de suma importancia, por lo que te invito a manejar esta data a través de watchers como lo dice @BetaM en su comentario, mira los siguientes ejemplos.

CON V-SHOW:

Vue.component("v-icon", {
  template: `<div>
    <i :style="{color:color, 'margin-top':'15px'}" :data-feather="type"></i>
    <p>{{color}}</p>
  <div>`,
  props: ["type","color"],
  mounted() {
    console.log(this.color)
    feather.replace()
  }
})

let app = new Vue({
  el: "#app",
  data() {
    return {
      tips:0
    }
  }
})
body {
  display:flex;
  align-items:center;
  justify-content: center;
  text-align: center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.js"></script>

<div id="app">
  <p>{{tips}}</p>
  <button @click="tips--" type="number" v-model="tips">-</button>
  <button @click="tips++" type="number" v-model="tips">+</button>
  <v-icon v-icon small v-show="tips == 0" :color='"blue"' :type="'check-circle'"></v-icon>
  <v-icon small v-show="tips == 1" :color="'red'" :type="'alert-octagon'"></v-icon>
  <v-icon small v-show="tips == 2" :color="'green'" :type="'help-circle'"></v-icon>
</div>

CON WATCHERS:

Vue.component("v-icon", {
  template: `<div>
    <div :style="{'color':color, 'margin-top':'15px'}" v-html="toSvg"></div>
    <p>{{color}}</p>
  <div>`,
  data() {
    return {
      type: "alert-octagon",
      color: "red"
    }
  },
  props: ["tips"],
  computed: {
  // PROPIEDAD COMPUTADA INDIFERENTE PARA OBTENER EL ICONO FEATHER RENDERIZADO
    toSvg() {
      return feather.toSvg(this.type)
    }
  },
  watch: {
  // MRAMOS LOS CAMBIOS DE LA PROPIEDAD TIPS
    tips(val) {
      // UTILIZAMOS LA LOGICA CONVENIENTE PARA CLASIFICAR FOO...
      val = Number(val)
      switch(val) {
        case 1:
          console.log(val)
          this.color = "blue";
          this.type = "check-circle";
          break;
        case 2:
          this.color = "green";
          this.type = "help-circle";
          break;
         default:
          this.color = "red";
          this.type = "alert-octagon";
          break;
      }
    }
  }
})

let app = new Vue({
  el: "#app",
  data() {
    return {
      tips:0
    }
  }
})
body {
  background: white;
  color: #323232;
  font-weight: 300;
  height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: Helvetica neue, roboto;
}

img {
  width: 56px;
  height: 48px;
}

h1 {
  font-weight: 200;
  font-style: 26px;
  margin: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.28.0/feather.js"></script>

<div id="app">
  <p>{{tips}}</p>
  <button @click="tips--" type="number" v-model="tips">-</button>
  <button @click="tips++" type="number" v-model="tips">+</button>
  <v-icon v-icon :tips="tips"></v-icon>
</div>

Básicamente la idea de trabajar con los watchers es que el componente hijo esté sujeto a cambios y se convierta en un componente mas dinámico, esto por supuesto ayuda a la carga y al renderizado, por otro lado la via sencilla es el primer ejemplo.

Un saludo, espero que te haya sido de ayuda.

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.