I am trying to switch from one icon to another depending on a boolean variable.
For example, I have the following icon:
<v-icon class="mr-3"> mdi-play </v-icon>
I have a boolean variable 'playing' which is initialised to false.
When 'playing' is False I want the icon to be 'mdi-play', but when the 'playing' variable changes to True I wish for the icon to switch to 'mdi-pause'. What would be the best way of achieving this? I have attempted binding v-text like so, but with no success:
<v-icon :v-text="playing ? 'mdi-pause' : 'mdi-play'" class="mr-3"></v-icon>
Many Thanks!
The directive should not be bound using :, in your example you could simple do :
<v-icon class="mr-3">{{playing ? 'mdi-pause' : 'mdi-play'}}</v-icon>
Related
(I'm using Vue 2.6) - I read the documentation on v-expansion-panels on vuetify which says it has disabled property to set, but it sets the whole v-expansion-panel disabled, and I want to disable a single v-expansion occurency or more, because I use a for to fill all expansion panels, like 10 occurencies for example, and I want to disable the occurency that has a certain condition. Can someone help? I already tried to use #click.stop inside expansion header, expansion content, but it does not work. I wanted to do like this. On number === 1, don't expand. Or I could even execute a function to return a false, and a message on screen.
<v-expansion-panels>
<v-expansion-panel
#click.stop="number === 1"
>
<v-expansion-header />
<v-expansion-content />
</v-expansion-panel>
</v-expansion-panels>
The v-expansion-panel takes a disabled prop and you can use with a condition to select the panel you want to disable.
<v-expansion-panel
v-for="(item,i) in 5"
:key="i"
:disabled="i === 2"
>
Demo: https://codepen.io/fu7zed/pen/GRQbbVx
API reference: https://vuetifyjs.com/en/api/v-expansion-panel/
My select options covering my label "Download".
I've tried to add offset-y, but the result is still bad.
<v-select offset-y dense outlined :items="downloadOptions" label="Download" v-model="downloadOption"></v-select>
Any hints for me to achieve that?
Use the menu-props prop.
For boolean values like offset-y you can just pass a string.
<v-select menu-props="offset-y"></v-select>
Here is the corresponding Documentation.
you can try with css Here is the code.
.v-text-field--outlined.v-input--dense .v-label--active {
transform: translateY(-26px) scale(.75);
}
I would like a clearable v-text-field with a label to show a computed string property based on other another property (a boolean in this simplified example).
Initially it works, the correct default string value is shown.
If I invert the boolean with a button from outside the v-text-field component, the next correct string value is shown as expected.
But if I use the clear button in the v-text-field to invert the boolean, the v-text-field clears and uses the label in the input field when focus is lost, and therefore not using the expected string value.
Input:
<v-text-field :value="text" label="Just a label" clearable #click:clear="booleanModel = true;"></v-text-field>
Computed property:
text: function() {
if(this.booleanModel) {
return 'Its on'
} else {
return 'Default text';
}
}
As far as I can see via vue dev tools, the state in the v-text-field is the same either way.
How come, and how to avoid this?
Please refer to this example: https://codepen.io/fasterlars/pen/RwKrzXZ?editors=1010
To be honest your use-case seems very strange but...
The problem is that v-text-box has some internal state (according to source code comments to make it work without the model) and on clear icon click it sets it to null but it does this in the nextTick - source. This is little bit strange but they probably has some reasons to do so...
So if you don't want to really clear the content but instead set it to something else, do not use default "clearable" functionality and use append slot instead:
<v-text-field :value="text" label="Just a label">
<template v-slot:append>
<v-icon #click="booleanModel = true">clear</v-icon>
</template>
</v-text-field>
When you click on the clear button, the value of booleanModel does not change.
You need to update the #click:clear = "booleanModel = false;".
Also, add a :key="booleanModel in your text field, which will ensure that whenever the value of booleanModel changes it will re-render the v-text-field component again.
I'm trying to only add a class to the v-flex if the grid size of the element is xs (so only on mobile). The code below shows the thought process behind it. However this doesn't work, so how can I apply a class that only on a certain grid size?
<v-flex xs12 lg6 :class="{'roomPadding': xs != visible }">
<p> My room </p>
</v-flex>
use breakpoint:
:class="{'roomPadding': $vuetify.breakpoint.xs}"
See docs about breakpoint object and visibility
If you want to apply the class to every breakpoint (i.e. screen-size) except xs, you can use:
:class="{'roomPadding': !$vuetify.breakpoint.xs}" (notice !)
or
:class="{'roomPadding': $vuetify.breakpoint.smAndUp}"
because breakpoints return boolean value.
You can get current breakpoint name (string) with vuetify.breakpoint.name
I have tried this, it is not working
<v-app :class="{'pagemargin': !$vuetify.breakpoint.xs}">
But this worked when I used vuetify class
<v-app :class="{'yellow': !$vuetify.breakpoint.xs}">
If you are using the next version (3) in beta, to do this I had to do the following:
<v-card-title :class="{ 'ma-0 pa-0': $vuetify.display.xs }">
I need the append-icon="close" to call #click="clearSearch()"
Right now I'm implementing it with a dedicated button:
<v-text-field
v-model="search"
class="search"
label="search"
prepend-icon="search"
append-icon="close">
</v-text-field>
<v-btn #click="clearSearch()"></v-btn>
I've tried adding append-icon-cb="clearSearch()" but it doesn't work and I don't know why
I've also tried simply using clearable, it clears the input but all the elements stay "filtered". I don't know how clearable works but my clearSearch() method simply does: clearSearch() {this.search = ""} and it works, that's why I use the custom clear input method
Use #click:append="clearSearch", :append-icon-cb is deprecated. (Source)
Solved it, here's the solution:
To avoid that problem you should bind the attribute with : symbol:
:append-icon-cb="clearSearch"
And don't put () otherwise it will not work (as #Traxo mentioned)
I think it should work if you remove (), because with () included, you immediately just call function once.
Edit: don't forget colon :
So:
:append-icon-cb="clearSearch"
Just Change :append-icon-cb="() => (e1 = !e1)" to #click:append="() => (e1 = !e1)" and this will work perfectly and remove the warning too...
This changed though:
For append icons e.g
append-icon="mdi-magnify-plus-outline",
you just do #click:append="zoomIn".
But for append outer icons like append-outer-icon="mdi-plus-circle-outline",`
you must add the word append i.e
#click:append-outer="addMore"
therefore, this will work with Vue2
<v-text-field
solo
append-outer-icon="mdi-plus-circle-outline"
#click:append-outer="addMore"
>
</v-text-field>