I'm using vue2-timepicker library for time picker component.
I would like timepicker behave like label property of v-select
<v-select label="Text" .... />
<vue-timepicker label="From" ...
So i want that after selecting a time, the text "From" keep visible.
Related
I'm using vue-tippy 6.0.0-alpha.63 for vue3.
I have a single component on the page which has a dynamic content and want to make a tooltip from it. This tooltip should be shown when user moves mouse over one of many buttons with class skill_tab. Those buttons are nested deeply inside the parent component of the current component.
I wrapped the component content with a <tippy> component and I'm trying to bind the tooltip to the buttons using to prop but it doesn't work.
I also tried using the triggerTarget prop providing the class .skill_tab as the value, but it looks like triggerTarget only works with refs.
Component for a button:
SkillTab.Vue
<div class="skill_tab">
...
</div>
Component for the tooltip:
SkillTooltip.Vue
<tippy followCursor=true to=".skill_tab" allowHtml=true placement="bottom-end" interactive=true>
<div id="skill_tooltip" class="skill_tooltip" :class="{active}" v-if="active">
...
</div>
</tippy>
Is there any way to bind the tooltip to all the buttons without passing refs via a global state or any other simple way?
I am using an el-datepicker component to filter a list of items on an el-table according to their dates. When I select a new date range, the filter works correctly but the datepicker element does not update to the new dates I selected until I click it again. Has anyone faced this problem before?
<el-date-picker
size="mini"
:value="filters.start_date"
#input="updateFilters({ value: $item, prop: 'start_date' })"
value-format="yyyy-MM-dd"
format="MMMM dd, yyyy"
type="daterange"
align="right"
/>
Then in the methods of my component:
updateFilters(data) {
this.$store.commit('panel/changeFilters', data)
...
}
So the datepicker gets its value from filters.start_date. The thing is, if I do console.log(this.filters.start_date), it shows the correct date range (the one I just selected). However the datepicker does not show that date range until I click again.
The problem is that you are binding the value i.e. using :value instead of v-model. So if you binding the value you have to assign the value to the data by yourself such that it causes reactiveness and hence updates the DOM.
If I with your approach of going with the binding value I would like to change my code something like this:
<el-date-picker
size="mini"
:value="filters.date_range"
#input="updateFilters"
value-format="yyyy-MM-dd"
format="MMMM dd, yyyy"
type="daterange"
align="right"
/>
Notice I have changed the filters.start_date to filters_date_range, as the value for type=daterange takes an array with two items. something like
[startDate, endDate]
Another thing that you should notice is I removed the parameters from updateFilters, because I want to receive the latest daterange whenever it gets selected.
Now in my handler function I just need to do:
updateFilters(data) {
this.$store.commit('panel/changeFilters', data)
this.filters.date_range = data
//data : [startDate, endDate]
}
And, it will update the DOM as soon as u change the picker value.
Another easier approach would be to use v-model instead of :value.
<el-date-picker
size="mini"
v-model="filters.date_range"
#input="updateFilters"
value-format="yyyy-MM-dd"
format="MMMM dd, yyyy"
type="daterange"
align="right"
/>
And it will update the DOM automatically, you don't have to set the value explicitly in the input handler, and can do any other stuff in the handler if you want to.
I'm new to vuetify and I'm stuck on how to properly use v-select. I'm pulling the select values from an API to a store called FormatTypes that looks like this:
[{"id":5,"formatlabel":"RDBMS Table or View"}
,{"id":6,"formatlabel":"Microsoft Access"}
....
,{"id":23,"formatlabel":"ArcGIS for Server image services"}]
my v-select:
<v-select font-weight-regular subtitle-1
v-model=dataset.formattypeid
:name="FormatTypes"
:items="FormatTypes"
:item-value="FormatTypes.id"
:item-text="FormatTypes.formatlabel"
:label="FormatTypeLbl"
:outlined=true
>
I've used the item-text/item-value props but I'm still getting the "object Object" in the display.
You don't have to use binding and no need to link it back with the items in item-value and item-text
<v-select font-weight-regular subtitle-1
v-model=dataset.formattypeid
:name="FormatTypes"
:items="FormatTypes"
item-value="id" // No need of binding and no need of FormatTypes linking
item-text="formatlabel" // No need of binding and no need of FormatTypes linking
:label="FormatTypeLbl"
:outlined=true
>
I have created a page with lightening components as shown the below image, I want to change my pick-List field into radio button next to picklist option to choose the appropriate selection, can someone please help to create radio buttons instead of pickList filed
in the component I have used below code
<div class="slds-form-element">
<div class="slds-form-element__control">
<ui:inputSelect label="Race Type"
aura:id="Type"
class="slds-select"
labelClass="slds-form-element__label"
value="{!v.newRace.Race_Type__c}" />
</div>
Maybe something in line with this: (replace v.Name with attribute that contains the name of the race):
<aura:component>
<lightning:radioGroup name="radioGroup"
label="slds-form-element__label"
options="{! v.newRace.Race_Type__c }"
value="{! v.Name}"
type="radio"/>
</aura:component>
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.