[英]Vue.js 2- sweet alert package simplert not working
我想在我用 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 警告]:無法掛載組件:未定義模板或渲染函數。
在發現
--->
更新
在使用 Laravel 5.5 創建新項目后,因為我認為 Laravel 5.2 中的設置會產生問題,所以我添加了相同的庫和組件,但該組件仍然拋出錯誤,幸運的是其他組件現在可以工作,但這仍然給出相同的錯誤,使用默認的 Laravel 5.5 設置。
剛剛發現simplet 也作為 Vue 插件存在。 這應該簡化整個過程,並且更好地實現,因為它使用事件總線進行打開/關閉,並且不再使用$refs
,根據官方 Vue 文檔應該避免使用。
例如,您可以在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 中更簡單的文檔有點令人困惑,並且關於插件不是最新的。 讓我知道這是否適合你!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.