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.
Related
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 a frontend library called Element UI to create some accordions on my website. I got an array of objects that I like to create accordions for. FYI, from the element ui website: the v-model used on the accordion specifies the currently active panel. The name attribute is the unique identification of the panel. That means I can do:
<el-collapse v-model="activeName" accordion>
<el-collapse-item title="Consistency" name="1">
<div>content content content</div>
</el-collapse-item>
<el-collapse-item title="Consistency" name="2">
<div>more content more content more content</div>
</el-collapse-item>
</el-collapse>
One this loads, the first accordion will open since in the data object, activeName is set to 1:
data() {
return {
activeName: '1',
}
}
Now I thought I'd just loop through the array and create accordions for the items in my array, and binding the name attribute to the index + 1, so that the first item will have the name attribute equal to 1, the second to 2 etc. So:
<el-collapse v-model="activeName" accordion>
<el-collapse-item
v-for="(item, index) in experience"
:title="item.company"
:name="index + 1"
:key="index"
>
<div> content content content </div>
</el-collapse-item>
</el-collapse>
But for some reason, when the page loads, the first item in the accordion won't open automatically. They're all closed by default. I created a codesandbox with the problem that you can see for yourself here: codesandbox
The problem is that when you run a for loop and assign name, it's a number and not a string.
:name="index+1" <---- This is a number
But, activeName is a string. So, the values don't match and that's why the accordian does not open on page load.
Here's an updated sandbox: https://codesandbox.io/s/vue-template-ysm79
I changed activeName to a number. The for loop accordian will now open and the normal HTML accordians won't.
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
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.
I want to make some list item from array and want delete them when i click each list item.When i click each item each item get deleted but here $emit(\'remove\') is actually what in vue js plaese help.
<button v-on:click="$emit(\'remove\')">X</button>
seems it connected to emit event which is bind to that element.
<button v-on:click="$emit(\'remove\')">X</button>
is connected to this piece of code in the declaration, you can see this code is just above in your example
<li
is="todo-item"
v-for="(todo, index) in todos"
v-bind:title="todo"
v-on:remove="todos.splice(index, 1)"
></li>
here you can see:
v-on:remove="todos.splice(index, 1)"
this is the event so when you click on that button this will be fired and that item will be removed from the list.
and make sure this list items are component so it use that template to render each items.
if you have further question please feel free to ask.