I know how to use the append-icon
property to append an icon at the end of an input like this:
new Vue({
el: '#app'
})
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.js"></script>
<div id="app">
<v-text-field
label="Answer (optional)"
append-icon="fas fa-times"
@click:append="$emit('remove-answer')"
></v-text-field>
</div>
But is there any way to append multiple icons or buttons like you can in Bootstrap?
I'd like to add a few icons with different actions, but I haven't been able to find a solution so far...
You can use slots append
or append-outer
, you can add whatever you want in there.
v-text-field label="Answer (optional)">
<template slot="append">
<v-icon>clear</v-icon>
<v-icon>search</v-icon>
</template>
</v-text-field>
Codepen
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With