Tengo un cuadro combinado en Vue JS para seleccionar varios elementos, quiero validar si el usuario selecciona algún elemento o lo deja vacío, pero el problema cuando imprimo la longitud y el valor de combox en la consola siempre da longitud == 2 y los valores no están definidos en ambos casos si el usuario selecciona elementos o no
HTML
<v-col cols="6"> <v-combobox class="xrfelements" :items="xrfElementsRatios" v-model="mainElementsRatios" :rules="notEmptyRule" label="Main Elements and Ratios" multiple required small-chips outlined dense></v-combobox> </v-col>secuencia de comandos java
validateForm: function (e) { if (document.getElementsByClassName("xrfelements").length) { console.log(document.getElementsByClassName("xrfelements".values return true;} this.errors = []; if (!document.getElementsByClassName("xrfelements").length){ console.log(document.getElementsByClassName("xrfelements").index) console.log(document.getElementsByClassName("xrfelements".values) this.errors.push('there is no element selected.') } if (this.errors.length) { this.$alert ("The following items should not be empty: " +this.errors.join(", ")) } e.preventDefault(e); },No es así como funcionan los marcos como vue: muchas veces no interactúas con el DOM directamente. En su lugar, utiliza Vue intermediario. Aprenda los conceptos básicos de Vue.
new Vue({ el: '#app', template: ` <v-col cols="6"> <v-combobox class="xrfelements" :items="xrfElementsRatios" v-model="mainElementsRatios" :rules="notEmptyRule" label="Main Elements and Ratios" multiple required small-chips outlined dense></v-combobox> </v-col>`, data() { return { notEmptyRule: [], mainElementsRatios: [], xrfElementsRatios: [], } }, methods: { validateForm: function (e) { if (mainElementsRatios.length) { console.log(mainElementsRatios); return true; } this.errors = []; if (!mainElementsRatios.length) { console.log(document.getElementsByClassName("xrfelements").index) console.log(mainElementsRatios) this.errors.push('there is no element selected.') } if (this.errors.length) { this.$alert("The following items should not be empty: " + this.errors.join(", ")) } e.preventDefault(e); }, } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>