Vue.js 2- sweet alert package simplert not working

问题:

I would like to use this library for alerts in my app built with Laravel 5.2 version. I have installed it and created a component like this:

<script>
import Simplert from 'vue2-simplert'

export default {
  data () {
    return {
      obj: {
        title: 'Alert Title',
        message: 'Alert Message',
        type: 'info',
        useConfirmBtn: true,
        customConfirmBtnText: 'OK'
      },
    }
  },
  methods: {
    openSimplert () {
      this.$refs.simplert.openSimplert(this.obj)
    },
  }
}
</script>

I am registering the component in my app.js like this:

Vue.component('alert', require('./components/Alert.vue'));

const app = new Vue({
    el: '#app'
});

And then trying to use it in my template:

<alert :useRadius="true"
       :useIcon="true"
       ref="simplert">
</alert>

It is part of this template:

@section('content')
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <a class="btn btn-info link-button" href="/extras/create" role="button">Lag ny extra</a>
            <div class="panel panel-default">
                <div class="panel-heading">Extras</div>
                <div class="panel-body">
                    @foreach($data as $extra)
                      <div class="media row">
                        <div class="media-left col-sm-3">
                          <a href="#">
                            <img class="media-object" src="/img/extras/{{ $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 :useRadius="true"
                                 :useIcon="true"
                                 ref="simplert">
                         </alert>
                        </div>
                      </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Which gets included in the app template like this:

<div id="app">
    <nav class="navbar navbar-default navbar-static-top">
     ...
    </nav>

    @yield('content')
</div>

I can see the component in the vue debug tools, but no html is being created, I can only see this:

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Ant I get the error in the console:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

--->

Update

After creating the new project with Laravel 5.5 since I thought the setup in Laravel 5.2 was creating problems, I have added the same library and the component and still this component throws an error, fortunately other components now work, but this still gives the same error, with the default Laravel 5.5 setup.

回答1:

Just found out that simplert also exists as Vue plugin. That should simplify the complete process and it is much better implemented as it uses an event bus for opening/closing and it doesn't use any longer $refs which should be avoided according to the official Vue docs.

You would do then for example in your app.js:

import Simplert from 'vue2-simplert-plugin'
Vue.use(Simplert)

const app = new Vue({
  el: '#app',
  data: {
    obj: {
      title: 'Alert Title',
      message: 'Alert Message',
      type: 'info',
      useConfirmBtn: true,
      customConfirmBtnText: 'OK'
    }
  },
  methods: {
    openSimplert () {
      this.$Simplert.open(this.obj)
    },
    closeSimplert () {
      this.$Simplert.close()
    }
  }
})

In your Larvavel template just use:

@section('content')
  // ...
    <simplert></simplert>
  // ...
@endsection  

The simplert docs in the wiki are a bit confusing and not up-to-date regarding the plugin. Let me know if that works for you!