knaka Tech-Blog

AI, IoT, DIYエレクトロニクス, データサイエンスについて投稿予定です。

Vue.js + Laravelで、並べ替え編集と 保存の機能 #php #Laravel #Vue.js

index:

概要:

前の Vue.js + Laravel関連で、
Vue.Draggable を使用した、ドラッグ操作の並び替え機能と、
並び替え順を、DB保存する機能の例です

・テーブルや、UL / LI タグの行を、ドラッグ操作で
 並び変更するような。UI操作を想定しています。

環境

Vue.Draggable
php7.3
Laravel 5.8
mysql
Vue.js

画面

・行を、ドラッグして。上下に移動できます。
・保存で、モデル側に。最終の並び番号を。送信し保存します

f:id:knaka0209:20200322170143p:plain

実装など

Vue.Draggable 読込

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>

JS部分
watch で、ドラッグ完了後の配列が取得できるようです。

new Vue({
	el: '#app',
	beforeMount: function(){
		this.getTasks()
	},	   
	data: {
		tasks : [],
		drag_items : [],
		json_items : "",
	},
	methods: {
		getTasks () {
			axios.get('/api/api_sort_items/get_items')
				.then(res =>  {
					this.tasks = res.data
//console.log(res.data )
			})            
		},
	},
	computed:{
		getTasks: {
			get: function(){
				return this.tasks;
			},
			set: function(value) {
				this.tasks = value;
			}
		}
	},		
	watch: {
			tasks: function(value){
				this.drag_items = value;
				var i = 1;
				var new_items = [];
				value.forEach(function(item){
					var data = item;
					data.order_no = i;
					i = i+1;
					//console.log(data.id);
					new_items.push(data)
				});
console.log(new_items)
				this.json_items= JSON.stringify(new_items);				
			}
	},
});

・Blade
index.blade.php
https://github.com/kuc-arc-f/lara58b_vue3_form/blob/master/resources/views/vue/sort_items/index.blade.php

<div id="app">
	<div class="panel panel-default">
		<div class="panel-heading">
			<h1>並べ替えサンプル</h1>
			<hr />
		</div>
		<div class="panel-body">
			<draggable tag="ul" v-model="tasks">
				<li v-for="task in tasks" :key="task.id"
					class="li_body">@{{ task.id }} / @{{ task.title }}
				</li>
			</draggable>				
		</div>
	</div>
	<hr />
	{!! Form::model(null , [
		'route' => 'vue_sort_items.update_number', 'method' => 'post', 'class' => 'form-horizontal'
	]) !!}	
	<div class="sorted_list_wrap" style="display : none;">
		<h3>sorted - List</h3>
		<ul>
			<li v-for="drag_item in drag_items" :key="drag_item.id"
			class="">
				ID: @{{ drag_item.id }} / order_no: @{{ drag_item.id }} / title: @{{ drag_item.title }}
			</li>		
		</ul>
		<input type="text" name="json_items" v-model="json_items" /><br /><br />
	</div>
	{!! Form::button('<i class="fa fa-save"></i> 並び替え順を保存する', 
		['type' => 'submit', 'class' => 'btn btn-primary']) !!}	
	{!! Form::close() !!}
	<hr />
	<br />
	<br />
</div>

・保存時に、JS配列を JSON変換し。POST送信しています。

参考のコード

github.com