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.
Related
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
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
enter image description here
I am using v-treeview in vuejs. i am getting the items dynamically while clicking in nodes children i am showing the different modules.i want to implement collapse and expand logic. if i am clicking on one node the last update node should be collapsed and clicked node should be expand.
<div class="card card-side-bar">
<v-treeview
:items="modules"
:open.sync="open"
open-on-click
v-model="tree"
:active.sync="active"
activatable
transition
:items-children="modules.children"
#update:active="test()"
>
<template v-slot:prepend="{ item, active }"></template>
</v-treeview>
</div>
You should handle the #update:open event which emits the array of open items. If you want only one item to be expanded - then you should remove all items from this array except the last and assign this array to the open prop of v-treeview.
I'm trying to iterate an array and present it as checkboxs so that the user can later check/uncheck them
I'm not sure how to make the checkbox be preselected since i have an Array of items
but i'm iterating an internal array
so far i have this
<div *ngFor="let privilege of group.privileges" style="text-align:left">
<div class="ui-g-4">
<p-checkbox label="{{privilege.privilegeName}}" [(ngModel)]="{{privilege.show <-- this is not working of course}}" name="fixco-privileges-view" value="{{privilege.privilegeName}}"></p-checkbox>
</div>
</div>
the checkbox and their label are appearing nice but not preselected...
If show property of a privilege is a boolean, just add binary="true" to your p-checkbox.
Also, remove the square braces in [(ngModel)]="{{privilege.show}}".
So your HTML code becomes
<p-checkbox binary="true" label="{{privilege.privilegeName}}" [(ngModel)]="privilege.show" name="fixco-privileges-view" value="{{privilege.privilegeName}}"></p-checkbox>
See Plunker
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>