knaka Tech-Blog

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

Vue.js で、form種類の対応 select/ratio/check/date等 #php #Laravel #Vue.js

index:

概要:

前の Vue.js + Laravel関連で、
form種類 select/ratio/check/date等 の対応となります。

環境

php7.3
Laravel 5.8
mysql
Vue.js

画面

f:id:knaka0209:20200321190632p:plain

実装など

・blade
v-model 等使用しました。

create.blade.php
https://github.com/kuc-arc-f/lara58b_vue3_form/blob/master/resources/views/vue/books/create.blade.php

<div id="app">
	<div class="panel panel-default">
		<br />
		<div class="panel-heading">
			<h1>新規作成</h1>
		</div>
		<hr />
		@if (count($errors) > 0)
			<div class="alert alert-danger">
			<ul>
			@foreach ($errors->all() as $error)
				<li>{{ $error }}</li>
			@endforeach
			</ul>
			</div>
		@endif
		<div class="panel-body">
			{!! Form::model($book, [
				'route' => 'books.store', 'method' => 'post', 'class' => 'form-horizontal'
			]) !!}
			{!! Form::close() !!}			
			<div class="form-group">
				{!! Form::label('title', 'title', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<input type="text" class="form-control" id="title"
					 v-model="title" required="required" placeholder="タイトル入力下さい">
				</div>
			</div>
			<div class="form-group">
				{!! Form::label('content', 'content:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<input type="text" class="form-control" id="content" v-model="content">
				</div>
			</div>
			<div class="form-group">
				{!! Form::label('type', 'type:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<select v-model="type" id="type" required="required" name="type" class="form-control">
						<option value="">選択下さい</option>
						<option v-for="select_item in select_items" v-bind:key="select_item.id"
							v-bind:value="select_item.id">@{{select_item.value}}
						</option>
					</select>
				</div>
			</div>   
			<!--date -->
			<div class="form-group">
				{!! Form::label('date_1', '日付_1', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-6">
					<input type="date" name="date_1" class="form-control"
					v-model="date_1"  />
				</div>
			</div>
			<div class="form-group">
				{!! Form::label('radio_1', 'ラジオ_1:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-4">
					<div class="radio_wrap" v-for="radio_item in radio_items" v-bind:key="radio_item.id">
						<input type="radio" name="radio_1" v-model="radio_1" v-bind:value="radio_item.id" />						
						@{{radio_item.value}}<br />
					</div>
				</div>
				<!--
				<span>radio_1: @{{ radio_1 }}</span>
				-->
			</div>    
			<div class="form-group">
				{!! Form::label('check_1', 'チェクボックス:', ['class' => 'col-sm-3 control-label']) !!}
				<div class="col-sm-4">
					<input type="checkbox" id="checkbox" v-model="check_1">CH_1  <br />
					<input type="checkbox" id="checkbox" v-model="check_2">CH_2  <br />
				</div>
			</div>   
	
			<br />
			<div class="form-group">
				<div class="col-sm-offset-3 col-sm-6">
					<button class="btn btn-outline-primary" v-on:click="send_post">投稿
					</button>
				</div>
			</div>
		</div>
		<hr />
		<br />
		<div class="panel-footer">
			{{ link_to_route('vue_books.index', '戻る' ,null, ['class' => 'btn btn-primary'] ) }}
		</div>
	</div>
</div>

参考のコード

github.com