Tengo un componente Vue que tiene pocos componentes secundarios (entradas del mismo tipo). La cantidad de entradas puede variar y depende del usuario, pero existe el requisito de tener al menos una entrada completa. Entonces, por ejemplo, puedo tener 5 entradas, 4 de ellas pueden estar vacías y todavía se consideran válidas.
Mi problema es que quiero agregar un borde rojo alrededor de la primera entrada de la lista cuando todas las entradas están vacías. Compruebo las entradas en el componente principal.
Tengo algo como esto en el componente principal:
<template> <custom-input v-for="(input, key) in inputs_num" :key=key" /> </template> <script> data() { return { inputValues: [], inputs_num: 1 } } methods: { checkInputs() { const validInputsCounter = 0; this.inputValues.forEach((input) => { if(input.trim().length > 4) validInputsCounter++; }); if(validInputsCounter == 0) { // Add border to the first input in the list. } } ... ... } </script>No pude averiguar cómo debo configurar el borde solo para la primera entrada.
Recomiendo pasar el estado de resaltado como accesorio en el componente secundario.
<template> <custom-input v-for="(input, key) in inputs_num" :key=key" :highlight="higlightInput(key)"/> </template> <script> data() { return { inputValues: [], inputs_num: 1 } } methods: { highlightInput(key){ if(key == 0){ if(this.inputValues.find(i => i.trim().length > 4) != undefined){ return true; } } return false; } } </script> Luego, en su componente secundario, declara un accesorio "resaltado" con un valor predeterminado de "falso". Presumiblemente, tenga un elemento <input> en esa plantilla; puede aplicar la clase de esta manera:
<input type = "text" :class="{'red-border':highlight}" ... />No se comprobó la validez del código. La búsqueda de errores de sintaxis se deja como ejercicio para el lector.
Puedes intentar algo como esto:
<template> <custom-input v-for="key in inputValues.length" :key="key" v-model.trim="itemValues[key - 1]" :class="{red_border: key==1 && allEmpty}" /> </template> <script> export default { data() { return { inputValues: [], } }, computed: { allEmpty() { return !this.inputValues.some(item => (item || '').trim().length > 4); } } } </script>