[Vuejs]-Turning v-select into a v-textfield on selecting other in dropdown

by

3👍

✅

Why can’t you try v-if to switch the fields like

<template>
 <v-form :model='appliances' class="content-padding" ref='pdfInputs'>
   <v-select class="company-size-dropdown" v-if="appliances.first_name!=='Other'"
    :items="users"
    attach
    item-text='name'
    item-value='name'
    v-model="appliances.first_name"
    label="First Name"
    required>
   </v-select>
   <v-textfield v-else v-model="appliances.first_name">
   </v-textfield>
 </v-form>
<template>
👤Rijosh

0👍

I have modified the code by Rijosh (Thanks, nice one), by adding a @keyup event to the text box. Hence appliances.first_name will only be updated only when the user press enter key after entering the new first name.

Please check the CODEPEN

<div v-if="appliances.first_name!=='Other'">
  <v-select class="company-size-dropdown"
    :items="users"
    attach
    item-text='name'
    item-value='name'
    v-model="appliances.first_name"
    label="First Name"
    required>
  </v-select>
</div>
<div v-else>
  <v-text-field 
    v-model="newItem" 
    label="First Name"
    v-on:keyup.enter="appliances.first_name = newItem">
  </v-text-field>
</div>
👤Anees Hameed

Leave a comment