How i can load data after click on vue-select, if i do this it's load aftet two click
<v2-select style="width:150px;max-width: 150px"
#click="loadFormats"
:searchable="false"
:clearable="false
"
:options="formats"
v-model="localSelectedFormat.value"
label="nameFormat"
>
</v2-select>
loadFormats(){
this.getFormats().then(res => {
this.formats = res.data;
...
})
you can remove the click event and call the loadFormats function in the mounted lifecycle hook function.
code below:
<v2-select style="width:150px;max-width: 150px"
:searchable="false"
:clearable="false"
:options="formats"
v-model="localSelectedFormat.value"
label="nameFormat"
>
</v2-select>
mounted(){
this.loadFormats()
}
```
Related
In below code, the component could be either button, input or RouterLink, and we don't know at advance which one will be. I added a lot of attributes to prevent v-if solution, because in this case we need to duplicate most of attributes:
<component
:is="rootElementTagOrComponentName"
#click.prevent="$emit('click', $event.target)"
:to="route"
:type="inputOrButtonElementTypeAttributeValue"
:class="CSS_Classes"
:value="rootElementTagNameIsInput && lettering"
:role="rootElementIsLink && 'link'"
:disabled="(rootElementTagNameIsButton || rootElementTagNameIsInput) && disabled"
:ref="ROOT_ELEMENT_REFERENCE"
>
<template v-if="!rootElementTagNameIsInput && lettering">{{ lettering }}</template>
<slot v-if="!rootElementTagNameIsInput"></slot>
</component>
The #click.prevent="$emit('click', $event.target)" not work for RoterLink. However, with #click.native.prevent="$emit('click', $event.target)" we get
[Vue warn]: The .native modifier for v-on is only valid on components but it was used on <button>.
How to resolve this conflict?
It gets tricky when you have a dynamic component which may or may not be a native element. Unfortunately there is no easy way to do this in the template alone, you'll have to do it in code (v-on object syntax does not support native events).
Untested, but something like this may work:
<Root
:to="route"
:type="inputOrButtonElementTypeAttributeValue"
:class="CSS_Classes"
:value="rootElementTagNameIsInput && lettering"
:role="rootElementIsLink && 'link'"
:disabled="(rootElementTagNameIsButton || rootElementTagNameIsInput) && disabled"
:ref="ROOT_ELEMENT_REFERENCE"
>
<template v-if="!rootElementTagNameIsInput && lettering">{{ lettering }}</template>
<slot v-if="!rootElementTagNameIsInput"></slot>
</Root>
components: {
Root: {
functional: true,
render(h, ctx) {
const { data, parent, children } = ctx
const tag = parent.rootElementTagOrComponentName
const click = e => {
e.preventDefault()
parent.$emit('click', e.target)
}
if (tag === 'RouterLink') {
data.nativeOn = data.nativeOn || {}
data.nativeOn.click = click
} else {
data.on = data.on || {}
data.on.click = click
}
return h(tag, data, children)
}
}
}
All I've done in code is deal with registering the click event, but you could move other things into code as well if you want.
I'm trying to use PrimeNg TabView component along with confirmDialog unsuccessfully
I am able to show this confirm dialog but it appears after user switch to target tab panel which is wrong.
<p-tabView (onChange)="handleChange($event)" [(activeIndex)]="index">...</p-tabView>
handleChange(e) {
this.confirmationService.confirm({
message: 'There are unsaved changes, do you want to proceed?',
accept: () => {
this.index = e.index;
},
reject:() =>{ }
});
}
Do you have an idea on how to prevent or allow tab change using confirm dialog ?
Thanks
there is no official way to prevent change to another tab by press on that tab , but 😅 there is a work around it first we need to prevent the tab change by tab click,
1️⃣ we need to set the header by ng-template or it called a custom header
template
<p-tabPanel >
<ng-template pTemplate="header">
<div (click)="handleChange($event,0)">
Godfather I
</div>
</ng-template>
.....
</p-tabPanel>
2️⃣ we bind a click event to the new header text and by using mouse event stopPropagation method we can prevent the change 👌,now we can control the change by confirm result but you need to pass the current tab index, that why I add another parameter to handleChange
component
handleChange(e:MouseEvent,tabIndex:number) {
e.stopPropagation();
if (this.index == tabIndex){
return;
}
// console.log(tabIndex)
this.confirmationService.confirm({
message: "There are unsaved changes, do you want to proceed?",
accept: () => {
this.index = tabIndex;
},
reject: () => {}
});
}
the if block if (this.index == tabIndex){return;} use to prevent showing the confirm dialog if we click on the same active tab again
demo 🚀🚀
I am using checkbox given by vue-element, visit https://element.eleme.io/#/en-US/component/checkbox.
But in edit mode they are not able to select anymore.
Please help me out.
<el-checkbox-group v-model="form.activity_type" size="small">
<el-checkbox-button
v-for="(all_type,index) in all_activity"
:key="index"
:label="all_type.id"
>{{all_type.activity_type_name}}</el-checkbox-button>
</el-checkbox-group>
<el-checkbox-group v-model="form.activity_type" size="small">
<e`enter code here`l-checkbox-button
v-for="(all_type,index) in all_activity"
:key="index"
:label="all_type.id">
{{all_type.activity_type_name}}
</el-checkbox-button>
</el-checkbox-group>
Hi you in order to show checkbox in edit mode you can do it like this:
data() {
return {
form: {
activity_type: []
}
};
}
import {activityData} from "#/api/activity";
2)under method function:
activityData(id).then(response => {
this.form = response.res;
});
3) and then from your controller function you can pass data in this format:
$allData = [];
$allData['activity_type'] = array(1,3);//the ids one you want to show check
return response()->json(["res" => $allData]);
I have a buefy table with details. Whenever I click on a chevron, the detailed view of the according row shows. It would be much better in my case, to have only one detailed view open. The desired outcome is: Whenever I click on a chevron, that detailed view opens and all other close.
In buefy, the opening of the detailed view is programmed like this:
<td v-if="detailed">
<a role="button" #click.stop="toggleDetails(row)">
<b-icon
icon="chevron-right"
both
:class="{'is-expanded': isVisibleDetailRow(row)}"/>
</a>
</td>
...
props: {
...
detailed: Boolean
...
}
...
methods: {
...
toggleDetails(obj) {
const found = this.isVisibleDetailRow(obj)
if (found) {
this.closeDetailRow(obj)
this.$emit('details-close', obj)
} else {
this.openDetailRow(obj)
this.$emit('details-open', obj)
}
// Syncs the detailed rows with the parent component
this.$emit('update:openedDetailed', this.visibleDetailRows)
},
openDetailRow(obj) {
const index = this.handleDetailKey(obj)
this.visibleDetailRows.push(index)
},
closeDetailRow(obj) {
const index = this.handleDetailKey(obj)
const i = this.visibleDetailRows.indexOf(index)
this.visibleDetailRows.splice(i, 1)
},
isVisibleDetailRow(obj) {
const index = this.handleDetailKey(obj)
const result = this.visibleDetailRows.indexOf(index) >= 0
return result
},
...
}
I see that there is an update_event sent to the parent. Do I have to save the
visibleDetailRows and tell the Child component to close it, when the button is pressed again? How would I do that?
The way I did it was to use the #details-open event to call a custom function :
<b-table
:data="data"
:opened-detailed="defaultOpenedDetails"
detailed
detail-key="id"
#details-open="(row, index) => closeAllOtherDetails(row, index)"
>
When you expand a row, the event is triggered.
And the called function closeAllOtherDetails() deletes all elements of the defaultOpenedDetails array, except the current row you just expanded :
closeAllOtherDetails(row, index) {
this.defaultOpenedDetails = [row.id]
}
That does the trick. Simple!
my component:
<div id="event-picker">
<template v-for="event in $store.state.events">
{{ event.artist }}
</template>
</div>
my store (mutations):
prepareEventForm(state, event) {
state.form.time = event.time
state.form.date = event.date
state.form.event = event.event
state.form.artist = event.artist
state.form.organizer = event.organizer
state.form.location = event.location
state.showForm = true
}
The error I get is Cannot read property 'time' of undefined
Where could be the problem?
EDIT:
this is my action method:
prepareEventForm({ commit }) {
commit('prepareEventForm')
}
The reason you are getting that error is that the event object being passed to your prepareEventForm mutation is undefined.
This is because when you call $store.dispatch('prepareEventForm', event), it calls your prepareEventForm action, passing event in as the second parameter.
You need to add event as the second parameter of your action and pass that as the second parameter in your commit call (which is what calls the prepareEventForm mutation):
prepareEventForm({ commit }, event) {
commit('prepareEventForm', event)
}