dimanche 3 juillet 2022

Change the default value of CKECKBOX

I'm using VueJS and HTML Bootstrap.

This is my code in HTML:(Prinitint li from a list on products)

const app = new Vue({
  el: "#app",
  data: {
    //Array de articulos que parseamos desde el fichero json
    articulos: [],
    articulosProducir:[],
    //Array del fetch de json de empresas
    empresas: [],

    //Por defecto primero va a tener la primera empresa de la array
    currentEmpresa: {},
    currentENombre:"",
    currentESerie:"",

    //Atributos de los aticulos
    fondos:[],
    laterales:[],
    tapas:[],

  },
  /*Metodos que se ejecutan al iniciar la pagina*/
  created() {
    this.getProducts();
    this.getEmpresas();
  },
  methods: {
    comprobar:function (index) {
      console.log(this.fondos[index])
      console.log(this.laterales[index])
      console.log(this.tapas[index])
      if (this.fondos[index] === true && this.laterales[index] === true && this.tapas[index] === true) {
        return true;
      } else if (this.fondos[index] === false && this.laterales[index] === true && this.tapas[index] === true) {
        return true;
      } else if (this.fondos[index] !== true && this.laterales[index] !== true && this.tapas[index] === true) {
        return true;
      } else if (this.fondos[index] === true && this.laterales[index] === false && this.tapas[index] === false) {
        return true;
      } else if (this.fondos[index] === false && this.laterales[index] === true && this.tapas[index] === false) {
        return true;
      }
    },
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<ul v-if="filter(a)" v-for="a in articulos" :key="`$index`" class="list-group list-group-horizontal col-12">

                    <li class="list-group-item col-3" v-bind:class="{'green-color': comprobar($index)}">
                        
                    </li>
                    <li class="list-group-item col-4" v-bind:class="{'green-color': comprobar($index)}"></li>
                    <li class="list-group-item col-2" v-bind:class="{'green-color': comprobar($index)}"></li>
                    <li class="list-group-item col-1" v-bind:class="{'green-color': comprobar($index)}">
                        <div v-if="a.fondo === 'X'" class="form-check" >
                            <input  class="form-check-input" v-model="fondos[$index]" type="checkbox" value="false" id="check1">
                            <label class="form-check-label" for="check1">
                                
                            </label>
                        </div>
                        <div v-else></div>
                    </li>
                    <li class="list-group-item col-1" v-bind:class="{'green-color': comprobar($index)}">
                        <div v-if="a.lateral === 'X'" class="form-check">
                            <input  class="form-check-input"  v-model="laterales[$index]" type="checkbox" value="false" id="check2">
                            <label class="form-check-label" for="check2">
                                
                            </label>
                        </div>
                        <div v-else></div>
                    </li>
                    <li class="list-group-item col-1" v-bind:class="{'green-color': comprobar($index)}">
                        <div v-if="a.tapa === 'X'" class="form-check">
                            <input class="form-check-input"  v-model="tapas[$index]" type="checkbox" value="false"  id="check3">
                            <label class="form-check-label" for="check3">
                                
                            </label>
                        </div>
                        <div v-else></div>
                    </li>

            </ul>
The idea is to program an inventory with products, and when 3 checkbox of a product are checked, the product can be sended to the factory.

The problem is that thev-model="fondos[$index]" is undefined by deafult and i want to set in False as default!




Aucun commentaire:

Enregistrer un commentaire