[Vuejs]-I want to create a text field in vuetify

by

-2👍

✅

Problem Statement: Want to create the text field with button in Vuetify.

Solution:

HTML:

<v-app id="app">

  <v-container>
  
    <v-text-field
      label="Chassis Number"
      color="primary"
      v-model="input"
      @keypress.enter="show">
  
       <template v-slot:append>
  
          <v-btn
            depressed 
            tile
            color="primary"
            class="ma-0"
            @click="show">
          
            show
            
          </v-btn>
        
      </template>
        
    </v-text-field>
      
  </v-container>
  
</v-app>

Vue.js:

new Vue({
  el: "#app",
    vuetify: new Vuetify(),
  data: {
    input: ''
  },
  methods: {
    show(){
      alert(this.input)
    }
  }
})

Output:

The wanted output

👤Praveen Chandramohan CSE

1👍

Something similar can be done this way:

...
<v-container>
  <v-layout wrap class="parent-box common">
    <v-text-field
       class="text-field__styled"
       outlined
       rounded
       dense
       color="#26376B"
       placeholder="Chassis Number"
       height="27"
       hide-details
    ></v-text-field>
    <button class="btn__styled">Check</button>
  </v-layout>
</v-container>

...

<style>
.parent-box {
  background: #26376B;
  width: 400px;
}

.common {
  outline: none;
  border-radius: 20px;
}

.text-field__styled {
  background: #fff;
}

.btn__styled {
  color: #fff; 
  width: 100px;
}

.v-text-field .v-input__control .v-input__slot {
  min-height: auto !important;
  display: flex !important;
  align-items: center !important;
}
</style>

Take a look into this CodePen.

Many styles are customizable in vuetify via props. But by default vuetify inspired by Material Design in contrast to your example, and it’s not so easy to customize default styles. Possibly it’d be better in your case to apply some of vuetify themes before using this library.

👤Alexander Shkirkov

Leave a comment