javascript - Vue.js 2-sweet alert package simplet not working

标签 javascript laravel-5.2 vuejs2 sweetalert2

我想用这个library用于我使用 Laravel 5.2 版本构建的应用程序中的警报。我已经安装了它并创建了一个这样的组件:

<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 中注册组件像这样:
Vue.component('alert', require('./components/Alert.vue'));

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

然后尝试在我的模板中使用它:
<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

像这样包含在应用程序模板中:
<div id="app">
    <nav class="navbar navbar-default navbar-static-top">
     ...
    </nav>

    @yield('content')
</div>

我可以在 vue 调试工具中看到组件,但是没有创建 html,我只能看到这个:
<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

Ant 我在控制台中收到错误:

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

found in

--->



更新

在使用 Laravel 5.5 创建新项目后,因为我认为 Laravel 5.2 中的设置会产生问题,所以我添加了相同的库和组件,但该组件仍然抛出错误,幸运的是其他组件现在可以工作,但这仍然给出相同的错误,使用默认的 Laravel 5.5 设置。

最佳答案

刚发现simplert also exists as Vue plugin .这应该会简化整个过程,并且更好地实现,因为它使用事件总线进行打开/关闭,并且不再使用 $refs根据 official Vue docs 应该避免这种情况.

例如,您可以在您的 中执行此操作。 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()
    }
  }
})

在您的 幼虫模板 只需使用:
@section('content')
  // ...
    <simplert></simplert>
  // ...
@endsection  

wiki 中更简单的文档有点令人困惑,并且关于插件不是最新的。让我知道这是否适合你!

关于javascript - Vue.js 2-sweet alert package simplet not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48164368/

相关文章:

php - 在Laravel中对复杂查询进行orderBy之后的GroupBy

javascript - 只接受数字的 Vue 输入

javascript - Nuxt:无需刷新即可销毁并重新创建当前页面的组件

javascript - 使用dd/mm/yyyy进行年龄验证

javascript - Backbone.js: View 未呈现

php - 将 API 上传到 DigitalOcean 液滴端口上的端口

google-analytics - 在 Play 商店中将 PWA 部署为 Web 应用程序和 TWA 时,如何处理 PWA 上的分析

javascript - 奇怪的javascript语法错误

javascript - 如何基于其他选项集隐藏/显示选项集CRM Dynamics

php - Laravel OrderBy 关系计数,但关系中的属性是特定的