Hola, tengo una pregunta corta. Estoy aprendiendo JS (Vue.js) en este momento y ahora tengo un ejemplo, donde tengo algunas entradas con el mismo nombre de clase.
<input class="checkInput" placeholder="firstname"/> <input class="checkInput" placeholder="lastname"/> <input class="checkInput" placeholder="age"/> <button @click="saveData">Save</button> Ahora, cuando hago clic en el botón Guardar, activé un método, que me da una colección HTML de todas las entradas con la clase checkInput .
var val = document.getElementsByClassName("checkInput");Ahora quiero iterar sobre esta colección y verificar si uno de los valores de entrada está vacío.
for (let item of val) { var y = item.value; if (y=="") { //Do save } else { //Empty Input Message to the user } }El problema es que cuando, por ejemplo, la segunda entrada está vacía y hago clic en el botón Guardar, ejecuta el método Guardar porque verifica cada elemento paso a paso. ¿Cómo puedo verificar toda la HTMLCollection al principio y luego ejecutar el método? (Y no, no quiero usar un formulario)
Una de las formas en que puedes hacer eso en Vue.js
new Vue({ el: '#demo', data() { return { user: { first_name: '', last_name: '', age: null } } }, methods: { saveData() { for (const [key, value] of Object.entries(this.user)) { if (!value) return alert(`${key} empty`) console.log(`${key}: ${value}`); } } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <input class="checkInput" placeholder="firstname" v-model="user.first_name" /> <input class="checkInput" placeholder="lastname" v-model="user.last_name" /> <input class="checkInput" placeholder="age" v-model="user.age" /> <button @click.prevent="saveData">Save</button> </div>