I recently started using vuetifyjs in my RTL project (written in Vue 2). I added a table in a card and I added the search bar as it's shown in the docs. I'm trying to do two things:
Move the "number of items to show" option from the footer to the top.
Make the search bar expendable from an icon.
Basically:
For the first case, I could not find a way to do this in the docs. For the second case, I'm trying to achieve this output:
I tried to look in the docs as well, but could not find a way to do this. I also came across with this article: Expand Searchbar with Search icon as well as show close icon onclick using Javascript
My current code:
<div>
<v-card>
<v-card-title>
<v-text-field
v-model="searchText"
append-icon="mdi-magnify"
label="חיפוש"
single-line
hide-details
></v-text-field>
</v-card-title>
<v-data-table
class="elevation-1"
:headers="headers"
:items="items"
:items-per-page="itemsPerPage"
:footer-props="settings"
>
</v-data-table>
</v-card>
</div>
Where:
settings: {
'items-per-page-options': [10, 25, 50, 100],
'items-per-page-text': 'סהכ'
},
itemsPerPage: 10
Is it possible to achieve this using vuetify?
https://codepen.io/pradipta-chatterjee/pen/YzaJXeW
<v-text-field
v-model.trim="searchText"
dense
filled
rounded
clearable
placeholder="Search"
prepend-inner-icon="mdi-magnify"
class="pt-6 shrink expanding-search"
:class="{ closed: searchBoxClosed && !searchText }"
#focus="searchBoxClosed = false"
#blur="searchBoxClosed = true"
></v-text-field>
Check the codepen i feel, i have what you were looking for.
Related
I have a modal with a small form (Select and list with multiple select). I can save my values. But after saving I want to close the modal and while closing clear every form field in this case my list selection and selectbox values, right now they are still the first value I selected before closing. Could someone give me a pointer on how to do it?
I thought of putting everything inside a form tag and maybe trying to achieve it from their, but do not know if it is a correct way. these are the selections I want to clear. The binded arrays I can already clear out. But not the select in the list
html:
<v-row>
<v-col cols="4" >
<v-select
:items="availableTimes"
item-text="date"
#select="filterByDate"
v-model="selectedDate"
></v-select>
</v-col>
<v-col cols="8">
<v-chip-group
v-model="selection"
active-class="deep-purple--text text--accent-4">
<v-chip
v-for="(time, i) in dateTimeArray"
:key="time.id"
:value="time"
v-on:click="getTimeValue(times)"
#click="getTimesFiltered(time)">
{{ time.startTime +" - "+ time.endTime }}
</v-chip>
</v-chip-group>
</v-col>
</v-row>
<v-row>
<v-col cols="4">
<v-card>
<v-list>
<v-list-item-group
v-model="model"
multiple
color="blue"
>
<v-list-item
v-for="(item, i) in voterArrayFilteredByTime"
:key="item.id"
:value="item">
<v-list-item-content>
<v-list-item-title v-text="item.voterUniqueName"></v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list-item-group>
</v-list>
</v-card>
It would be helpful if you show your script tags.
Without seeing what you are trying to do, my suggestion would be to use reset your "selection" variable in your methods. For example if you have a close button
<v-btn #click="resetStuff" >Close me<v-btn>
Then in your method:
methods: {
// your method
resetStuff() {
this.selection = null
//.. some more variables to reset
}
In my nuxt project i use Vuetify. I take date from users and when user changed page by clicking save button, v-text-field dissapears before page changed, before going next page . It is because of route changing but i could not find a solution for this problem.
<v-menu v-model="menu"
:close-on-content-click="false"
transition="scale-transition"
rounded
nudge-bottom="60px"
min-width="290px">
<template v-slot:activator="{ on, attrs }">
<v-text-field :value="formatDateText"
label="Birth Date"
v-bind="attrs"
v-on="on"
offset-y
hide-details>
</v-text-field>
</template>
<v-date-picker no-title
v-model="date"
#change="dateChangeFormat(formatDate)"
/>
</v-menu>
I found 2 solutions for this problem . first solution is use
features: {
transitions: false
},
inside the nuxt.config.js
Second solution : add ref to v-menu .
<v-menu v-model="menu"
ref="menu"
:close-on-content-click="false"
transition="scale-transition"
rounded
nudge-bottom="60px"
min-width="290px">
in script area ;
beforeDestroy() {
this.$refs.menu.activatorNode = null;
},
I've two radio buttons. On the second radio button I want put 3 components and align the size width to fit on a unique line (row). They are a radio button and 2 select fields using Vuetify.
At the moment the components are on 3 rows, but I don't know how to put it into a unique row into 3 columns. I has followed the grid system from Vuetify.
<v-flex xs12>
<v-radio-group v-model="paymentType" column>
<v-radio :label="getCurrentMonthText()"></v-radio>
<v-container>
<v-row no-gutters>
<v-col cols="12" sm="4">
<v-radio label="Outro mês"></v-radio>
</v-col>
<v-col cols="12" sm="4">
<v-select label="Mês" :items="monthNames" v-model="monthSelected"></v-select>
</v-col>
<v-col cols="12" sm="4">
<v-select label="Ano" :items="years" v-model="yearSelected"></v-select>
</v-col>
</v-row>
</v-container>
</v-radio-group>
</v-flex>
Result:
If I understand your question correctly, you want to have the "Outro Mes" radio button, the "Mes" selector, and the "Ano" selector all in the same row.
Your code is doing that right now for window sizes larger than "sm" in the vuetify grid system. When I run it on my machine, I get this:
Window size larger than "sm"
Window size "sm"
If you want to have the radio button on the same row as the selects at all times, even when the window size is "sm", then you simply need to change each column to [cols="4"].
If I'm not understanding your question correctly, please leave a comment with clarification.
I have this array I'm using v-for to create 3 columns of info. In each column is an image. When I mouse over 1 column/image I want to change JUST that image, none of the others. How can I accomplish this with Vue?
My Vue code looks like this:
<v-row
align="center"
justify="center"
>
<v-col cols="4"
v-for='(billingPlan, index) in billingPlans.basicPlans'
:key='billingPlan.id'
>
<v-img
:src="whichRose"
#mouseenter="switchRose(index)"
>
</v-col>
</v-row>
I'm thinking I can somehow target the image by its index, but I'm not having any luck.
Any ideas on what I can do?
Maybe something like this will work?
<v-row
align="center"
justify="center"
>
<v-col cols="4"
v-for='(billingPlan, index) in billingPlans.basicPlans'
:key='billingPlan.id'
>
<v-img
:src="billingPlan.hovered ? billingPlan.image2 : billingPlan.image1"
#mouseenter="billingPlan.hovered = true"
>
</v-col>
</v-row>
Would also need to add functionality if you want the image to change when you hover away.
Edit: To ensure proper reactivity, each billingPlan should have the property hover initiated to 0 before the component is created so that the reactive src attribute knows to rerender when hover changes.
How to get rounded corners for <v-text-field> in Vuetify?
<v-flex xs12>
<v-text-field style="border-radius:50px"
label="Text field"
solo
></v-text-field>
</v-flex>
I tried border-radius property for bother the container <v-flex> and <v-text-field> itself but it did not work.
Codepen.
Whenever I need to change Vuetify styles I add a class to a containing element and then add your styles. Working with Vuetify (like any framework) can be frustrating due to specificity. In this case you need at least level 3 specificity.
template
<v-text-field
label="Text field"
solo
class="my-input"
></v-text-field>
css
.my-input.v-input .v-input__slot {
border-radius: 100px;
}
You can add the rounded property to a v-text-field (vuetify docs)
<v-text-field
label="Text field"
solo
rounded
></v-text-field>
You can do this:
<v-text-field
label="Text field"
solo
class="rounded-lg"
></v-text-field>
You can add these classes to control the border radius:
rounded-sm
rounded
rounded-lg
rounded-xl
rounded-0
I use 'rounded-0' a lot to remove pesky border radius in components like v-text-field.
Full documentation here.