Vue.js 2-甜蜜警报程序包simplert无法正常工作 [英] Vue.js 2- sweet alert package simplert not working

问题描述

我想使用此库在使用Laravel 5.2构建的应用程序中发出警报版本.我已经安装它并创建了这样的组件:

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>

我正在这样在app.js中注册组件:

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>

它是此模板的一部分:

@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>

我可以在vue调试工具中看到该组件，但是没有创建html，我只能看到以下内容:

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警告]:无法安装组件:模板或渲染函数未安装 定义.

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

发现于

--->

--->

更新

使用Laravel 5.5创建新项目后，由于我认为Laravel 5.2中的设置会产生问题，因此我添加了相同的库和组件，但该组件仍会引发错误，所幸现在其他组件都可以工作，但这仍然可以同样的错误，使用默认的Laravel 5.5设置.

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.

推荐答案

仅发现简单也作为Vue插件存在.这应该简化整个过程，并且更好地实现，因为它使用事件总线进行打开/关闭，并且不再使用$refs了，根据

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.

例如，您将在您的 app.js 中进行操作:

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()
    }
  }
})

在您的 Larvavel模板中，只需使用:

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

Wiki中的simplert文档有点令人困惑，并且与该插件不是最新的.让我知道这是否适合您！

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!

这篇关于Vue.js 2-甜蜜警报程序包simplert无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！