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 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