CODEWITHSUNDEEP
vue.jsv-select
Aya Rabee
Aya Rabee

Reputation: 31

How to customize the input element with a conditional class based on an error state inside v-select Vue library

I try to put class 'has-error' based on condtion and handle vaildation message for that v-select but i don't know how achieve that

https://vue-select.org/

<v-select
      v-model="add.city"
      :options="currentCities"
      :label="$store.getters['GET_LANG_NAME'] === 'ar' ? 'nameAr' : 'nameEn'"
      :placeholder="$t('addresses.addCity')"
      required
      class="select porder-radius-5 text-gray input_fixed-height"
      :class="{ 'text-align-right': $store.getters['GET_LANG_NAME'] === 'ar' ,  'has-error': errors.has('addAddressForm.city') }"
    > </v-select>

I have tried to handle that using Scoped slot but nothing happen

 <v-select
      v-model="add.city"
      :options="currentCities"
      :label="$store.getters['GET_LANG_NAME'] === 'ar' ? 'nameAr' : 'nameEn'"
      :placeholder="$t('addresses.addCity')"
      required
      class="select porder-radius-5 text-gray input_fixed-height"
      :class="{ 'text-align-right': $store.getters['GET_LANG_NAME'] === 'ar' }"
    >
      <template #search="{ search, attrs, events }">
        <input
          type="search"
          v-bind="attrs"
          v-on="events"
          class="vs__search"
          :class="{ 'has-error': errors.has('addAddressForm.city') }"
        />
      </template>
 </v-select>

Upvotes: 1

Views: 74

Answers (1)

Chiara Ani
Chiara Ani

Reputation: 1093

  1. Make sure errors is reactive. For example wrap it in reactive:
<script setup>
import { reactive } from 'vue'
const reactiveErrors = reactive(errors)
</script>
  1. Make a computed function with errors.has('addAddressForm.city'):
<script setup>
import { computed } from 'vue'
const errorClass = computed(() => reactiveErrors.has('addAddressForm.city'))
</script>
  1. Call this computed function in your bidden class:
<template>
<input
  :class="{ 'has-error': errorClass }"
  />
</template>

Upvotes: 0

Related Questions