[Vuejs]-Validation focus and error on the label text and input border

by

0👍

First of all you’re using @click event in Vue but blur/focus in the vanilla js.
Clicking on the input several times will toggle focusBlue variable.

Then we have second problem that said variable focusBlue is shared between each input – it’s a variable of the vue component that holds those inputs.

You could either store an id/name of the input that is currently selected and toggle class if necessary or (even better) extract those inputs to separate component – so they could be reused elsewhere and toggle logic would be contained within them

<template>
    <div>
        <input type="text" @focus="selectedInput = 'input1'" @blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input1' }"/>
        <input type="text" @focus="selectedInput = 'input2'" @blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input2' }"/>
        <input type="text" @focus="selectedInput = 'input3'" @blur="selectedInput = ''" :class="{ 'focus_blue': selectedInput === 'input3' }"/>
    </div>
</template>

<script>
    // ...
    data() {
        return {
            selectedInput: ''
        }
    }
    // ...
</script>

or as a separate component

// input-component
<template>
    <div :class="cssClassNames">
        <input 
            type="text" 
            @focus="focus" 
            @blur="blur" 
            :value="value" 
            @input="$emit('input', $event.target.value)"
        />
    </div>
</template>

<script>
    // ...
    name: 'customInput',
    props: ['value'],
    data() {
        return {
            focused: ''
        }
    }
    // ...
    methods: {
        focus() {
            this.focused = true
        },
        blur() {
            this.focused = false
        }
    }
    // ...
    computed: {
        cssClassNames() {
            return {
                'focused': this.focused,
                'has-error': !this.value, // or other classes
            }
        }
    }
    // ...
</script>

an then somewhere in another component

    <customInput v-model="valueOfThisInput" />

Leave a comment