前提・実現したいこと
Laravelとvueでアラートモーダルを作っています。
その際、利用した「Sweet Alert」というライブラリの確認ダイアログに問題があります。
削除ボタンをクリックすると、Sweet Alertダイアログが表示された後、すぐに消えて要素を削除してしまいます。言い換えれば、Vueで定義している「削除」または「キャンセル」を選択・クリックする時間がありません。このダイアログをきちんと止めて、オプションを選択するにはどうすればよいですか?
該当のソースコード
Laravel
1 2<div id="app"> 3 4… 5<form action="{{ url('cards/'.$cards->id) }}" method="POST"> 6 {{ csrf_field() }} 7 {{ method_field('DELETE') }} 8 9 <button @click="alert" type="submit" class="delete"> 10 削除 11 </button> 12 13</form> 14… 15 16</div>
vue
1 2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 3 <script src="https://unpkg.com/vue-swal"></script> 4 5 <script> 6 7 Vue.use(VueSwal) 8 9 new Vue({ 10 el: '#app', 11 methods: { 12 alert: function(isConfirm) { 13 this.$swal({ 14 title: "本当に削除しますか?", 15 text: "削除すると復元できない可能性があります", 16 icon: "warning", 17 buttons: true, 18 dangerMode: true, 19 closeOnConfirm: false, 20 }) 21 .then((willDelete) => { 22 if (willDelete) { 23 this.$swal("削除しました。", { 24 icon: "success", 25 }); 26 27 } else { 28 this.$swal("キャンセルされました。"); 29 } 30 }); 31 } 32 } 33 }); 34 35 </script>
試したこと
・formタグの外にbuttonタグを出すと、きちんと表示されます
(当たり前ですが、その場合削除ができません。)
補足情報(FW/ツールのバージョンなど)
・サーバーサイドでLaravelを使っており、選択する前に、form actionが実行されている模様
・参考にしたURL:https://www.kabanoki.net/4034/
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/02/24 08:35
2020/02/24 11:39
2020/02/24 23:59