chrisgrim
1 month ago
62
2
Vue

@click isActive Selecting All inputs on page

Posted 1 month ago by chrisgrim

Hi All, I am trying to do an is active / not active css change on my input fields with vue. I have it working except for one little problem. If I select one field it does the css change for all of my input fields. Here is how I have the code now.

            <div class="create-field">

                <label>City</label>
                <input
                v-model.trim="location.City"
                type="text" 
                class="create-input"
                :class="{ active: isActive,'error': $v.location.City.$error }"
                name="city" 
                placeholder=" "
                @input="$v.location.City.$touch"
                @click="isActive = true"
                @blur="isActive = false"
                />

                <div v-if="$v.location.City.$error" class="validation-error">
                    <p class="error" v-if="!$v.location.City.required">The City is Required</p>
                </div>

            </div>
            <div class="create-field">

                <label>State</label>
                <input 
                v-model.trim="location.State" 
                type="text" 
                class="create-input" 
                :class="{ active: isActive,'error': $v.location.State.$error }"
                name="state" 
                placeholder=" "
                @input="$v.location.State.$touch"
                @click="isActive = true"
                @blur="isActive = false"
                />

                <div v-if="$v.location.State.$error" class="validation-error">
                    <p class="error" v-if="!$v.location.State.required">The State is required</p>
                </div>

            </div>

What is the simplest way to fix this? Thanks!

Please sign in or create an account to participate in this conversation.