(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/
Related
Sometimes I don't want to have a "rules" option/property in some input fields, is it possible within vuejs3 to set up a kind of if statement so that the property "rules" are only presented on certain fields? Because now i just do an empty array[]. But would rather see this differently.
So that I dont need to apply "rules" option in my form scheme when I dont need it.
This is my template code:
<div v-for="(prop, key) in formSchema" :key="key">
<q-input v-if="prop.component === 'input'"
outlined
v-model="dataRef[key]"
:type="prop.type"
:label="prop.label"
maxlength="12"
class="super-small"
hint="Name and surname"
lazy-rules
:rules="prop.rules" (want this behind an if statement if not needed)
>
</q-input>
<q-select v-else-if="prop.component === 'select'"
outlined
v-model="dataRef[key]"
:type="prop.type"
:options="prop.options"
:label="prop.label">
</q-select>
</div>
Add a ternary condition within your attribute. When the attribute is set to null or undefined it gets omitted.
:rules="addRule ? prop.rules : null"
Is it possible to disable this blur call on the active element from SwiperJS in the onTouchStart event handler?
Some background:
For touch and desktop devices I'm using swiper for forms on swiper-slides. Within a form I'm using vue-select (a combobox).
The Problem: When the user selects an entry, the entry get not selected on the first time but on the second time.
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div>First form</div>
<v-select :options="selectionEntries"></v-select>
</div>
<div class="swiper-slide">
<div>Second form</div>
<v-select :options="selectionEntries"></v-select>
</div>
</div>
</div>
See also this example on codepen
I figured out that it seems to work correctly:
When I remove the blur-listener on the input field of the vue-select box. But it is used to close the selection list when the user leaves the field.
When I comment out this blur call in SwiperJS. I'm not sure why it is used there.
The first point is not an option, so is it possible to disable the blur call of SwiperJS via configuration?
Currently I'm using this workaround (SwiperJS V6.4.1):
const swiper = new Swiper(".swiper-container", {
// Workaround part 1:
touchStartPreventDefault: false
})
// Workaround part 2:
swiper.touchEventsData.formElements = 'notExistingHtmlTagName'
Part 1: To handle mouse down and click events on all elements, set the swiper parameter touchStartPreventDefault: false.
That will disable this code block: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L90-L97
Part 2: Set swiper.touchEventsData.formElements = 'undefined' to define nothing as formElements. That will disable the code block that calls blur: https://github.com/nolimits4web/swiper/blob/9dead9ef4ba5d05adf266deb7e3703ceb199a241/src/components/core/events/onTouchStart.js#L81-L88
I am using element-ui, version 1.43.
I want to add spell-check in text area input(if I write something wrong then red line should appear below that text and on right click i can get suggestion).
How to implement it using element-ui.
If you're using an el-form & el-form-item to wrap your el-input type='textarea' elements, you can utilize the label slot to hook into native browser spellcheck functionality.
<el-form>
...
<el-form-item>
<label slot="label" spellcheck="true">Notes</label>
<el-input type="textarea"></el-input>
</el-form-item>
...
</el-form>
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>