Jan 10, 2018
0
Level 4
Vue 2 sweet alert opening modals for each element separately
I am using vue.js 2 SweetAlert plugin in my project. I have created a simple Alert component where I use it:
<template>
<div>
<a @click="openSimplert" class="btn btn-info" role="button">Slett</a>
<simplert ref="id">
</simplert>
</div>
</template>
<script>
export default {
props: ['id'],
data () {
return {
obj: {
title: 'Alert Title',
message: 'Alert Message',
type: 'info',
useConfirmBtn: true,
customConfirmBtnText: 'OK'
}
}
},
methods: {
openSimplert () {
this.$Simplert.open(this.obj)
},
closeSimplert () {
this.$Simplert.close()
},
}
}
</script>
The problem I have is that I am using this component in foreach loop in my laravel template:
@foreach($data as $extra)
<div class="media row">
<div class="media-left col-sm-3">
<a href="#">
<img class="media-object" src="{{ $extra->image_path }}" alt="{{ $extra->title }}">
</a>
</div>
<div class="media-body col-sm-6">
<h4 class="media-heading">{{ $extra->title }}</h4>
<p>{{ $extra->description }}</p>
</div>
<div class="col-sm-3 action-buttons">
<a class="btn btn-info" href="/extras/create" role="button">Rediger</a>
<alert :id="{{ $extra->id }}"></alert>
</div>
</div>
@endforeach
How can I now open only the modal for that one element where I click the alert button? Because now when I click it if I have 2 elements inside the foreach loop, I open 2 modals. I have tried with this:
openSimplert () {
let id = this.id;
let simplert = this.$Simplert;
this.$refs.id.simplert.open(this.obj)
},
But, then I get an error:
Cannot read property 'open' of undefined
Please or to participate in this conversation.