3 months ago by drax7

I am using vue.js 2 SweetAlert plugin in my project. I have created a simple Alert component where I use it:

    <a @click="openSimplert" class="btn btn-info" role="button">Slett</a>
    <simplert ref="id">
export default {
  props: ['id'],
  data () {
    return {
      obj: {
        title: 'Alert Title',
        message: 'Alert Message',
        type: 'info',
        useConfirmBtn: true,
        customConfirmBtnText: 'OK'
  methods: {
    openSimplert () {
    closeSimplert () {

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 }}">
                    <div class="media-body col-sm-6">
                      <h4 class="media-heading">{{ $extra->title }}</h4>
                      <p>{{ $extra->description }}</p>
                    <div class="col-sm-3 action-buttons">
                      <a class="btn btn-info" href="/extras/create" role="button">Rediger</a>
                      <alert :id="{{ $extra->id }}"></alert>

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;

But, then I get an error:

Cannot read property 'open' of undefined

Sign in or create an account to reply to this topic.