1

Los valores de array item1 los estoy recorriendo por medio de un v-for y se visualizan por medio de un checkbox lo que deseo es que si alguno de los valores del item1 llegan hacer igual a los de los valores del item2 esos valor que sean iguales se me liste como un checkbox disable (no se pueda seleccionar ) y los demas valores que no son iguales a los del item2 se listen como checkbox normal. para poder seleccionarlos y poder guardar

  <ul v-for="(r, index) in item1" :key="index">
    <input
      v-model="colorCantidad"
      :disabled="ver"
      type="checkbox"
      :name="r"
      :id="r"
    />
  </ul>
  <p>Result = {{ item2 }}</p>
  <button @click="myFunction()">Click Me</button>
</template>
<script>
export default {
  data() {
    return {
      item1: [12, 10, 9, 5, 6, 4],
      item2: [12, 9, 4],
      result: "",
      ver: false,
    };
  },
  methods: {
    myFunction: function () {},
  },
  computed: {
    colorCantidad() {
      this.item1.forEach((element) => {
        console.log(element);
        if (element === this.item2) {
          return (this.ver = true);
        } else {
          return (this.ver = false);
        }
      });
    },
  },
};
</script>```
2
  • 1
    Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    el 29 sep. 2021 a las 14:40
  • @Comunidad dale gracias el 29 sep. 2021 a las 16:17

1 respuesta 1

0

Bueno, tendría que usar la propiedad computada en su v-for, debido a que esta retornaría los valores repetidos en los arrays para luego hacer dinámico el disabled de los checks. Entonces, una posible solución:

<template>
  <div >
   <ul v-for="(state, i) in stateCheck" :key="i">
    <input
      :disabled="state"
      type="checkbox"
    />
  </ul>
   <!-- estado de cada checkbox -->
  {{stateCheck}}
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data: ()=>({
    item1: [12, 10, 9, 5, 6, 4],
    item2: [12, 9, 4],
  }),
  computed:{
    stateCheck(){
      return this.item1.map(rep=> this.item2.includes(rep))
    }
  }
};
</script>

Includes: Determina si una matriz incluye un determinado elemento, devuelve true o false según corresponda.

map: Crea un nuevo array con los resultados de la llamada a la función indicada aplicados a cada uno de sus elementos.

La propiedad computada stateCheck obtendrá el valor booleano de los números repetidos entre arrays item1 e item2 para luego ser iterado y usar sus índices en true para inhabilitar los checkboks y viceversa.

2
  • gracias por la ayuda el 6 oct. 2021 a las 13:46
  • @JuanEsteban Si fue solución no olvide marcar la respuesta, como útil, saludos
    – ZeroCool
    el 7 oct. 2021 a las 17:51

Tu Respuesta

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

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