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 }">
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/
I have an HTML element like below
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
initial value of showOriginalContent is false
and from mounted method am calling an another method where i will make the value of showOriginalContent to true based on some conditions . Currently even if the showOriginalContent is true i can see that v-else is getting displayed for a fraction of seconds before v-if is rendered in the DOM . How can i solve this issue ? I tried to move the function call to all other life cycle methods but nothing is working . I have gone through before and after navigation approach in vue js ,Is it possible to apply that logic here?
I think it's normal if I understood correctly what you posed as the problem.
Because the mounted state is called when the view has already been OK and displayed and only once.
So a variable declaring in this method its change will not necessarily have an effect on what should be displayed.
Try to see the lifecycle in Vuejs for more detail.
Put it in computed or watch methods to see.
Use an outer div and control this div with another variable that will be true when you are done with your condition parts in mounted hook.. like this..
<div v-if="conditioncheckdone">
<div v-if="showOriginalContent"> original content</div>
<div v-else> default content </div>
</div>
It will resolve your issue of displaying v-else stuff while you are checking your conditions in mounted
turn the default showOriginalContent value to null instead of false
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>
I got a paper-listbox containing a paper-checkbox contained within each paper-item of the list.
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</paper-item>
</template>
</paper-listbox>
Whenever the checkbox is clicked it also changes the selected state of the listbox items resulting in an paper-item becoming selected or deselected.
How can that be prevented?
paper-listbox uses Polymer.IronSelectableBehavior and Polymer.IronMultiSelectableBehavior. So, you can use selectable attribute in order to prevent changing the selected state.
selectable is a CSS selector string. If this is set, only items that match the CSS selector are selectable. You can put a random string so that it won't match the paper-item element.
Demo
i solved the problem by avoiding it ;)
Moved the checkbox out of the paper-item into the dom-repeat like so:
<paper-listbox id="groupMembers" multi attr-for-selected="label">
<template is="dom-repeat" items="[[users]]" as="member">
<paper-item label="[[member.user]]">
<span class="member-user">[[member.user]]</span>
</paper-item>
<div class="checkWrapper">
<paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
</div>
</template>
</paper-listbox>
With a bit of CSS positioning magic that works. Added a wrapper div to allow absolute positioning.
Given the following:
<div id="#my-container">
<div class="title">Companies</div>
<div class="tab active tab-apple">Apple</div>
<div class="tab tab-google">Google</div>
</div>
When page is loaded without any tab clicks yet, whichever tab with the default active class, needs to go in the .title div. For the example above, <div class="title">Apple</div>
On click of a tab, the class is switched to active, and vue.js needs to update the .title div once again.
How can this be done with vue.js? I've tried but not able to get it to work as intended.
The answer by David is one way to do it. But Vuejs offers in-line computations for this. So, no need to hook into any CSS event. Here's some code to explain:
Create a data property active_tab, just like David mentioned. And then bind it's value just like he's done it. In your tabs, add an click event and at that event, assign appropriate value to active_tab.
<div class="tab active tab-apple" #click="active_tab = Apple">Apple</div>
<div class="tab tab-google" #click="active_tab = Google">Google</div>
Now, to dynamically assign the active class to the respective tab, make the class attribute, a computed property, like this:
<div
:class="['tab', active_tab == 'Apple' ? 'active' : '', 'tab-apple']"
>
Apple
</div>
What this code is basically doing is, :class makes class a computed property. Then the commas in the array divide the statement. So, the computation will always add tab and tab-apple classes. But, only if active_tab == 'Apple' then ? add 'active' else : add ''
Not sure which CSS framework you are using, but normally I hook into the events thrown by the tab switching (many CSS frameworks provide this access). Once hooked into it, you can write a Vue custom directive that will take that event and use it to update a VM attribute that indicates which tab is active.
Then you can use normal mustache templating to get it into your template:
<div class="title">{{ active_tab }}</div>