Hi have the following statement.
<li
v-for="(area, i) in areas"
:key="i"
style="display: flex; justify-content: space-evenly; flex-wrap: wrap;"
>
<v-checkbox
#click="areaClick"
v-model="area.areaChosen"
:id="area.id.toString()"
:label="area.area_description"
color="beige lighten-1"
></v-checkbox>
</li>
It displays as follows:
My problem is that if you click on the checkbox itself (The square) then nothing happens however if you click on the label eg, Atlantic Seaboard then it works correctly.
I would like it to work when I click on the square as well.
Thats why you're using #click handler. According to docs, try #change
You can also use #click.capture this will still allow you to click on both the checkmark and label.
<v-checkbox
#click.capture="areaClick"
v-model="area.areaChosen"
></v-checkbox>
The problem could also be with your version of Vue/Vuetify. When I updated the libraries (Vue.js from 2.6.10 to 2.6.14 and Vuetify from 2.0.17 to 2.6.6), it started working.
Related
I am using vuetify
and I just wanna add an icon over the button of v-switch,
I searched in slots and found nothing
<v-switch label="Dark mode" flat inset></v-switch>
I wanna do like this picture
You can use v-checkbox, with off-icon and on-icon.
As example:
<v-checkbox class="pt-3"
v-model="$vuetify.theme.dark"
color="purple"
off-icon="mdi-theme-light-dark"
on-icon="mdi-theme-light-dark"
></v-checkbox>
Reference at https://vuetifyjs.com/en/api/v-checkbox/#props
far you can do is append-icon and/or prepend-icon props
you can check the detail at https://vuetifyjs.com/en/api/v-switch/#props
I tried to add an #click to a font awesome icon. However, whether I add an #click event to span or i tag, it doesn't work at all. I suspect the event is taken by the input field. How can I make the magnifier icon clickable?
<div class="control has-icons-right">
<input v-model="keyword" #keyup.enter="findName" class="input is-large" type="text" placeholder="Input 1 word, hit Enter"/>
<!-- or 2 words separated by space -->
<span class="icon is-right" #click="findName">
<i class="fa fa-search"></i>
</span>
</div>
Source: 3sName.com
It is because, you are using bulma class .icon which having the following css.
pointer-events: none;
Try to override it with
pointer-events: all;
pointer-events css will prevent your element from emitting a click event.
:)
use a button / anchor 'a' instead span to wrap the fa-icon, along with #click method? Span isn't good practice for click event as well.
Have you tried #click.prevent="findName" modifier?
How do I make this expansion-panel open content only on clicking icon?
Tried using readonly but it didn't help.
Thanks in advance!
https://vuetifyjs.com/en/components/expansion-panels#expansion-panel
You can put online the argument in all collapse like: expanded={!expanded}
and in the icon you put the onClick={toggle}
I was having the same problem and just found a solution for that.
You need to implement a custom button on the expansion panel, so it will accept custom events. You can achieve that using template and v-slot:
<v-expansion-panel #click.prevent="onClick()">
<v-expansion-panel-header>
...your expansion panel code here
<template v-slot:actions>
<v-btn icon #click.stop="onClick()">
<v-icon>mdi-filter-variant</v-icon>
</v-btn>
</template>
</v-expansion-panel-header>
</v-expansion-panel>
...and your onClick method would be like this:
onClick() {
/*this will toggle only by icon click. at the same time, will prevent toggle
by clicking on header. */
const curr = this.panel
this.panel = curr === undefined ? 0 : undefined
}
It may seem a little magical that the same function is toggling on icon click and preventing toggle on header click, but this happens because the custom icon button does not toggle itself, so we force that using the onClick method. On the other hand, the expansion panel header has its native property of toggling the panel. So when we click it, its value will automatically change and we need to change it back to what it was before the click.
To make the expansion-panel open only on clicking icon you can use css that disables all clicks on the header and only allows clicks on the icon:
<style>
.v-expansion-panel-header{
pointer-events: none;
}
.v-expansion-panel-header__icon{
pointer-events: All;
}
</style>
Keep in mind if you are using scoped style you have use >>>:
https://vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors
Here is the template example, I added #click to provide btn like experience when user clicks on an icon, it's not necessary:
<template>
<v-expansion-panel>
<v-expansion-panel-header>
<template #actions>
<v-icon class="icon Icon Icon--32 icon-utility-arrows-carrot_down-32"
#click/>
</template>
</v-expansion-panel-header>
<v-expansion-panels >
<v-expansion-panel-content >
<!--content here-->
</v-expansion-panel-content>
</v-expansion-panels>
</v-expansion-panel>
</template>
On my Vuetify + Lealflet project the map hides all popup dialogs and I don't know why. I use Vue2Leaflet library. I am a beginner with web development. Here is a pic of the problem:
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="height: 50vh; width: 50vh"
>
The problem is a clash of z-index ranges. Vuetify uses z-index ranges 0-10 while leaflet uses the range 100-1100. Fortunately, the z-index of a child element is relative to the z-index of their parent.
I advice you to give l-map a z-index of 0 like this.
<l-map
:center="center"
:zoom="zoom"
#click.right="mapRclicked"
ref="map"
style="z-index: 0; height: 50vh; width: 50vh"
>
This will automatically bring your component in line with all of Vuetify z-indexes. In contrast, #bgsuello workaround requires that you modify the z-index of every Vuetify component that may conflict with the map, including other dialogs, menus, animations, tabs, toolbars, snackbars...
Edit: This is an outdated answer.
see #Javier answer below as pointed out by #ondrejsv on comment.
It does not work anymore at least in Vuetify 2.1.9 and Vue 2.6.x. The solution by Javier seems to work.
Increase the z-index style property of your dialog.
<v-dialog style="z-index:9999;"
... rest of your code ...
I find it quite practical to wrap the map in an image, like this
<v-img
height="100%"
width="100%">
<l-map>
...
</l-map>
</v-img>
This way there is no need to do anything with the z-index.
I am on Vue2.x + Vuetify + Vue2leaflet.
I tried many things and finally what worked for me was to cover the with a . My code reads as :
<v-lazy>
<v-img>
<l-map>
.... rest of the code
</l-map>
</v-img>
</v-lazy>
This takes inputs on v-lazy from https://medium.com/#elralimi.lamia/leaflet-vuejs-vuetify-map-not-showing-well-in-a-modal-with-grey-parts-9a5d551ea472. v-img was suggested by geomuc in the above response.
Other options that I tried but failed were: this.map.invalidateSize(); , this.map.remove();, this.$nextTick(() => {...}, z-index.
I'm starting a vue js project and I decided to use Element UI which seams pretty nice.
The problem is I can't find in their documentation how to make a block button, which has the same width as the column where it is placed.
I would appreciate if you can point this out. Thank you!
Keep in mind that vue dispatches the style/class prop to the parent element of your component.
So the following should work:
<el-button style="width: 100%">Default</el-button>
You can make it by adding a full-width column in it,
like so.
<el-row>
<el-col :span="24">
<el-button type="primary"> Your Button Here </el-button>
</el-col>
</el-row>