-
Notifications
You must be signed in to change notification settings - Fork 85
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Is it possible to open inside a rendered list? #89
Comments
This might help: |
I have yet to find a way of doing this. I have instead wrapped it in my own custom component, which has an open method that takes an object as a parameter. That way I can have a single modal that is mounted (but not shown) when the page loads and then each item in the list will set the modal as needed and then show it by calling open(data.data). It works quite well, as it means you only need one modal per open(object_to_show = null) {
if (object_to_show !== null) {
this.title = object_to_show.title;
this.message = object_to_show.message;
// setup the modal as needed, etc...
}
this.$refs._modal.open();
},
formClosed() {
this.$refs._modal.close();
this.title = "";
this.message = "";
//etc, etc...
} Another catch is that you need to overwrite the close button in order to reset the modal each time it closes. <sweet-modal ref="_modal" :blocking="true" :hide-close-button="true">
<div slot="title" class="sweet-title" style="padding-left: 0;">
<h2 v-if="title">{{ this.title }}</h2>
<h2 v-else>Default Title</h2>
<div class="sweet-box-actions d-flex">
<div class="sweet-action-close" @click="formClosed">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path
d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
fill="#292c34"
/>
</svg>
</div>
</div>
</div>
<div>
{{ message || "default message" }}
<!-- MAIN BODY OF THE MODAL TO CUSTOMISE -->
<div>
</sweet-modal> It feels a bit hacky, but the only other way I could make it work was to have a modal instance per item in a list. If you find a better way of doing this, please let me know :) |
|
I was able to do this by putting the modal outside the list's loop first, then pass in the object containing an item on the list, in this case
Create a data property to hold the item on the list, then pass down the
|
Is it possible to do this?
I'm getting a
this.$refs.modal.open is not a function
and I suspect that it is becausethis
must be used in some clever way in the function that opens the modal.The text was updated successfully, but these errors were encountered: