Vuetify autocomplete by default have custom "up" and "down" arrow icons:
How can be changed this icon to search icon in other events (active or inactive) and get this view:
This example created using v-text-field:
Code:
<v-text-field
flat
solo
hide-details
append-icon="search"
label="Search..."
color="#000000"
></v-text-field>
I tired append icon to vuetify autocomplete component but can't remove default up and down rows.
Code:
<v-autocomplete
v-model="select"
:append-outer-icon="search ? 'search' : 'search'"
label="Search..."
type="text"
:loading="loading"
:items="items"
:search-input.sync="search"
cache-items
class=""
flat
hide-no-data
hide-details
#click:append-outer="startSearch"
></v-autocomplete>
Result:
Generaly how I can change arrow icons to search icon and do it as clickable for search?
Use append-icon="" and set it to blank
Here's the example.
If you want to append icon with callback function use append-icon-cb="()"
https://codepen.io/anon/pen/WqXVWj?&editable=true&editors=101
Try this append-icon="mdi-magnify"
Related
I'm working with Vue.js 2 and Vuetify 2.2.28 (I've already tried to upgrade in Vuetify 2.6 but I have the same issue), I'm trying to apply the "attach" property to the v-menu of a v-date-picker, to keep the calendar attach to his input when I scroll the dialog.
The attach property works on my datepickers outside the dialog, and it also work on my v-select inside the dialog, but I don't understand why it doesn't work with my datepickers inside the dialog :
<v-col md="8">
<v-menu
ref="menuDateEnd"
v-model="addEndDateTrigger"
:close-on-content-click="false"
transition="scale-transition"
max-width="290"
attach
>
<template v-slot:activator="{ on }">
<v-text-field
:value="addUserForm.endDate | date"
label="Date de fin"
readonly
color="ilgprimary"
v-on="on"
hide-details
clearable
#click:clear="clearAddDateEnd"
/>
</template>
<v-date-picker v-model="addUserForm.endDate" scrollable locale="fr" color="ilgprimary" header-color="ilgsecondary" #change="checkEndDate()">
</v-date-picker>
</v-menu>
</v-col>
I've also tried to put an ID to my v-col and attach the datepicker to it doing attach="#my-col-id" but it doesn't work too.
Someone know how to fix this please ?
I'm just learning Vue.js & Vuetify and I can't change the size of my icon. Can anyone help me, please?
<v-text-field
prepend-inner-icon="mdi-magnify"
>
</v-text-field>
You can put anything you want in that "prepend-inner" emplacement by using slot ( it's an advanced feature in vue)
<v-text-field label="Prepend inner">
<template v-slot:prepend-inner>
<v-icon x-large>mdi-magnify</v-icon>
</template>
</v-text-field>
I have a menu dialog inside a table column to update a corresponding value.
The menu dialog when opened shows a card with a select box and update button.
The menu is activated using v-on which works exactly as intended but I have no way of closing the menu.
Since it's inside a table, using a v-model and changing the value causes multiple menus/select boxes to be shown to be opened.
<v-menu :close-on-content-click="false" :close-on-click="false">
<template v-slot:activator="{ on: { click } }">
<v-chip #click="click" small>{{item[header.value]}}</v-chip>
</template>
<v-card>
<!-- <v-card-title class="subtitle-2 pb-0 pt-1">Update Status</v-card-title> -->
<v-select items="Status" class="px-4 pb-2" hide-details label="Status"></v-select>
<v-card-actions>
<!-- <v-spacer></v-spacer> -->
<v-btn color="primary" #click="" text>Update</v-btn>
<v-btn color="warning" text>Cancel</v-btn>
</v-card-actions>
</v-card>
</v-menu>
How can I close the menu without using a v-model?
It was an easy solution...
I added a v-model to the menu dialog and created an object in data display: {}. The v-model on the menu dialog was v-model="display[item.id]" using the item id as an index of sorts and then I could just use a method to close it.
close(id) {
this.display[id] = false;
},
Done.
i am using v-autocomplete with autofocus.
<v-autocomplete
autofocus
solo
rounded
prepend-inner-icon="mdi-magnify"
#keyup.enter="showFilteredItems"
id="searchInput"
:items="stocks"
item-text="symbol"
item-value="name"
:filter="customFilter"
ref="autocomplete">
<template v-slot:item="data">
<v-btn block depressed :to="`/stock/${data.item.symbol}/`">
<v-list-item-title v-html="data.item.symbol"></v-list-item-title>
<v-list-item-subtitle v-html="data.item.name"></v-list-item-subtitle>
</v-btn>
</template>
</v-autocomplete>
the autocomplete work correctly when user click on it and then type the input:
but when user type the input without clicking on v-autocomplete, v-menu does not appear :
however relative events emitted as expected and items are filtered.
surprisingly i tried the same code in vue (not nuxt) and it works properly!
I think you can use :
:input-attrs="{'autofocus':true}"
like question below:
https://github.com/paliari/v-autocomplete/issues/27
I want to make datetimepicker like this : https://vuetifyjs.com/en/getting-started/consulting-and-support. If you click "2 Hour Consulting Session", it will display datetimepicker like this : https://ibb.co/kHrbHTG. I want to make like that. But I don't find the component datetimepicker in the documentation. The docs : https://vuetifyjs.com/en/components/date-pickers
Based on my analysis, it uses datepicker modal. not the datepimepicker. The timepicker is only customized using the outline button. but I am confused how to place the outline button next to the datepicker
My script like this :
<template>
<v-row>
<v-col cols="12" sm="6" md="4">
<v-dialog
ref="dialog"
v-model="modal"
:return-value.sync="date"
persistent
width="290px"
>
<template v-slot:activator="{ on }">
<v-btn color="success" dark v-on="on">Call datepicker</v-btn>
</template>
<v-date-picker v-model="date" scrollable>
<div class="flex-grow-1"></div>
<v-btn text color="primary" #click="modal = false">Cancel</v-btn>
<v-btn text color="primary" #click="$refs.dialog.save(date)">OK</v-btn>
</v-date-picker>
</v-dialog>
</v-col>
</v-row>
</template>
<script>
export default {
data: () => ({
modal: false,
}),
}
</script>
Is it possible to customize the datepicker to be like that?
That Datepicker is not part of Vuetify. That screenshot you took is in fact an <iframe> of the https://calendly.com/ website, which looks like a website for managing appointments. So that calendar is basically just custom CSS made by that company, nothing to do with Vuetify.