I'm using vue-material Dialog to show a form, I've do that :
LeftSidenav.vue - template :
<md-button class="list-button" id="formBtn" #click="openFormDialog()">
<md-icon>description</md-icon>
<span class="sidenav-item-text">{{$t('form_dialog')}}</span>
<md-tooltip md-delay="100" md-direction="right">{{$t('form_dialog'')}}</md-tooltip>
</md-button>
<md-dialog md-open-from="#formBtn" ref="formDialog">
<md-dialog-title>Title</md-dialog-title>
<md-dialog-content>
<form-dialog></form-dialog>
</md-dialog-content>
</md-dialog>
LeftSidenav.vue - script :
methods: {
openFormDialog() {
this.$refs.formDialog.open();
},
closeFormDialog() {
this.$refs.formDialog.close();
},
},
FormDialog.vue :
<template>
<div>
Test
<div class="buttons">
<md-button class="md-raised" #click="closeFormDialog">Cancel</md-button>
<md-button class="md-raised">Submit</md-button>
</div>
</div>
</template>
The problem is in my FormDialog I don't know how to access closeFormDialog method, how can I close my Dialog by clicking the cancel button on my FormDialog.vue ?
<el-dialog
:visible="dialogVisible"
title="Contact Form View"
ref="changeUserId"
:before-close="() => dialogVisible = false"
>
<contact-form />
</el-dialog>
check if it had same as element ui function before-close
Related
I want to make a modal using bootstrap in vue.js.
I got the warning error
'[Vue warn]: Failed to resolve component: b-button' and here is my code
<template>
<div>
<b-button id="show-btn" #click="showModal">Open Modal</b-button>
<b-button id="toggle-btn" #click="toggleModal">Toggle Modal</b-button>
<b-modal ref="my-modal" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block #click="hideModal">Close Me</b-button>
<b-button class="mt-2" variant="outline-warning" block #click="toggleModal">Toggle Me</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
},
toggleModal() {
// We pass the ID of the button that we want to return focus to
// when the modal has hidden
this.$refs['my-modal'].toggle('#toggle-btn')
}
}
}
</script>
i try to solve my problem by looking for the answer from their website bootstrap-vue.org but still it did not work on my project.
How can I implement displaying a link in a primevue toast message? I cannot use v-html directive and triple brackets do not work. Does anybody has another idea how to solve it?
A hacky way is to extends Toast component:
Here a codesandbox : https://codesandbox.io/s/extend-primevue-toast-o5o1c?file=/src/CustomToastMessage.vue
1. On your component
Import your custom toast component where you need to call this.$toast:
<template>
<div>
<CustomToast />
<CustomToast position="top-left" group="tl" />
<CustomToast position="bottom-left" group="bl" />
<CustomToast position="bottom-right" group="br" />
<div class="card">
<Button #click="test" label="test" />
</div>
</div>
</template>
<script>
import CustomToast from "./CustomToast.vue";
export default {
components: {
CustomToast,
},
data() {
return {
messages: [],
};
},
methods: {
test() {
this.$toast.add({
severity: "success",
summary: "Test",
detail: "<b>Test Bold</b>",
});
},
},
};
</script>
2. CustomToast.vue (extend primevue toast)
<template>
<Teleport to="body">
<div ref="container" :class="containerClass" v-bind="$attrs">
<transition-group name="p-toast-message" tag="div" #enter="onEnter">
<CustomToastMessage
v-for="msg of messages"
:key="msg.id"
:message="msg"
#close="remove($event)"
/>
</transition-group>
</div>
</Teleport>
</template>
<script>
import Toast from "primevue/toast/Toast.vue";
import CustomToastMessage from "./CustomToastMessage.vue";
export default {
extends: Toast,
components: {
CustomToastMessage,
},
};
</script>
3. CustomToastMessage (extend primevue toastmessage)
Add v-html where you want to have html
<template>
<div
:class="containerClass"
role="alert"
aria-live="assertive"
aria-atomic="true"
>
<div class="p-toast-message-content">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{ message.summary }}</span>
<div class="p-toast-detail" v-html="message.detail"></div>
</div>
<button
class="p-toast-icon-close p-link"
#click="onCloseClick"
v-if="message.closable !== false"
type="button"
v-ripple
>
<span class="p-toast-icon-close-icon pi pi-times"></span>
</button>
</div>
</div>
</template>
<script>
import ToastMessage from "primevue/toast/ToastMessage.vue";
export default {
extends: ToastMessage,
};
</script>
There is an easiest solution.
Just implement your own template.
Example:
<Toast :position="toastPosition">
<template #message="slotProps">
<span :class="iconClass"></span>
<div class="p-toast-message-text">
<span class="p-toast-summary">{{slotProps.message.summary}}</span>
<div class="p-toast-detail" v-html="slotProps.message.detail" />
</div>
</template>
</Toast>
I have a simple three question onboarding form, I am trying to use the wizard for.
beforeTabSwitch does not appear to be called when I switch between the form elements. Here is my component:
<template>
<div>
...
<form-wizard #on-complete="onComplete">
<tab-content title="Location">
<p>looks like you're at {{address}}, correct?</p>
<b-form role="form" #submit.prevent="handleSubmit(login)">
<base-input alternative
class="mb-3"
name=""
:rules="{required: true}"
prepend-icon="ni ni-pin-3"
v-model="address">
</base-input>
</b-form>
</tab-content>
...
<div class="mt-3">Selected: <strong>{{ selected }}</strong></div>
</tab-content>
</form-wizard>
</div>
</template>
<script>
...
methods: {
onComplete: function(){
alert(this.$store.state.auth.userPrefs.genre);
},
beforeTabSwitch: function(){
alert("This is called before switching tabs")
return true;
}
}
}
</script>
Good morning.
I have a problem with the buefy timepicker.
It works if I use the "clear" or "Now" buttons but not on selecting time. This seems to have started with a recent buefy update.
https://codepen.io/anon/pen/JqBKGE?&editable=true&editors=101
<div id="app" class="container">
<textarea style="width: 100%;" readonly>{{ time }}</textarea>
<b-field label="Select time">
<b-timepicker v-model="time"
inline
placeholder="Click to select...">
<button class="button is-primary"
#click="time = new Date()">
<b-icon icon="clock"></b-icon>
<span>Now</span>
</button>
<button class="button is-danger"
#click="time = null">
<b-icon icon="close"></b-icon>
<span>Clear</span>
</button>
</b-timepicker>
</b-field>
</div>
JS
const example = {
data() {
return {
time: new Date()
}
},
watch: {
time: {
handler: function() {
console.log(this.time);
}
}
}
}
const app = new Vue(example)
app.$mount('#app')
Any suggestions?
Seems to be an issue with the buefy Timepicker
https://github.com/buefy/buefy/issues/1418
Edit: This was fixed with Buefy release 0.7.7
Sorry for the help request, but I can't work out how to get a bootstrap-vue modal to display initially on page load without needing to trigger it with a button or link.
Thanks.
Instead of trying to open modal on page load, you can open it on mounted event of Vue.
Elevated from sample code on Bootstrap-Vue website:
<template>
<div>
<b-modal ref="my-modal" hide-footer title="Using Component Methods">
<div class="d-block text-center">
<h3>Hello From My Modal!</h3>
</div>
<b-button class="mt-3" variant="outline-danger" block #click="hideModal">Close Me</b-button>
<b-button class="mt-2" variant="outline-warning" block #click="toggleModal">Toggle Me</b-button>
</b-modal>
</div>
</template>
<script>
export default {
methods: {
showModal() {
this.$refs['my-modal'].show()
},
hideModal() {
this.$refs['my-modal'].hide()
}
},
mounted() {
this.showModal();
}
}
</script>