'Vuetify - Prepend button on the right of a text-field input

I'm looking for the best practice vuetify way to render :

button on the right of a text-field (attached)

I can't seem to find it on the main site.

enter image description here

<v-row class="text-center d-flex justify-center" v-if="downloadOption == 'HTML'">
    <v-text-field dense outlined v-model="imageLink" label="Image Link" required></v-text-field>

    <v-btn large class="ma-1" outlined color="indigo"> Copy </v-btn>

    <v-text-field dense outlined v-model="html" label="HTML" required></v-text-field>

    <v-btn large class="ma-1" outlined color="indigo"> Copy </v-btn>
</v-row>

Do you guys have any tips on how to do that?

cssvue.jsvuejs2vue-componentvuetify.js


Solution 1:[1]

Try this :

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})
.v-btn {
  height: 39px !important;
}
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <v-form>
      <v-container>
        <v-row>
          <v-col cols="8" sm="6" class="pr-1">
            <v-text-field dense outlined v-model="html" label="HTML" required></v-text-field>
          </v-col>
          <v-col cols="4" sm="6" class="pl-0">
            <v-btn large outlined color="indigo"> Copy </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
  </v-app>
</div>

Solution 2:[2]

Try to use the append slot in the v-text-field component :

 <v-text-field dense outlined v-model="html" label="HTML" required  >
     <template #append>
       <v-btn  outlined color="indigo"> Copy </v-btn>
     </template>             
 </v-text-field>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Rohìt Jíndal
Solution 2 Boussadjra Brahim

Related Questions