javascriptのフレームワークであるvue.jsを本気で学び初めました。
もともとjqueryが得意だったので、そっちを使えばサクッと作れそうのものなのですが、今回はあえて時代の流れに乗ってvue.jsで作成しました。
クリックしたらinputタグを増やすvue.js
今回作成したのは、formの入力項目をブラウザで操作して増やしていく機能です。
クリックしたらinputタグが増えていくような、よく見かけるあれのことです。
HTMLでフォームの側を作成
bootstrapを使って軽く整えて、こんな感じになりました。
vue.jsのコンポーネントになっているのは、<input-field>の部分です。
ここがvue.jsで出力される部分となります。
そして、イベントを発火させるのは、@click=”add_route”のところですね。
<div class="row justify-content-center mt-3">
<div class="col-8">
<form class="row">
<div id="app" class="col-12">
<div class="row d-flex justify-content-between form-group mb-3">
<input-field
v-for="item in route_input"
v-bind:todo="item"
v-bind:key="item.id"
></input-field>
</div>
<div class="row d-flex justify-content-around form-group">
<div @click="add_route" class="btn btn-info col-2">追加</div>
</div>
</div>
</form>
</div>
</div>jsファイルでコンポーネントの作成
コンポーネントで作成したテンプレートをもとにループさせて、htmlが出よくされます。
ポイントはinputタグのname属性にちゃんとkey番号を振って、多次元連想配列としてデータを渡せるinputタグにしてあります。
Vue.component('input-field', {
props: ['todo']
template: `
<div class="route_count col-12 mb-3 row d-flex justify-content-between">
<input class="col-3 form-control" type="time" :value="todo.time" :name="'route[' + todo.id + '][time]'">
<input class="col-8 form-control" type="text" :value="todo.place" :name="'route[' + todo.id + '][place]'">
</div>`
})インスタンスの作成
dataのroute_inputがinputタグ表示の根本になる値です。
まだ作成していませんがdata_arrayに多次元連想配列の値を準備することによってhtmlタグが生成されます。
methodsのadd_routeには先程設定した@click=”add_route”の実行部分となります。
html出力の根本になるroute_inputに配列を追加することによって、inputタグが増えていくという仕組みになっています。
var app = new Vue({
el: '#app',
data: {
route_input: data_array,
},
methods: {
add_route: function () {
var add = {
id: this.route_input.length,
time: '',
place: ''
}
this.route_input.push(add)
}
}
})配列を作成する
実際だと、データベースから受け取った配列を使うことが多いんじゃないかなと思うので、phpで準備した配列をインスタンスに渡すようにします。
phpの配列はjsで使うので、jsonにしてからdata_arrayという変数に入れています。
これでインスタンスに渡すデータを作成することができました。
<?php
$data = [
[
'id' => 1,
'time' => '10:00',
'place' => 'テキスト1',
],
[
'id' => 2,
'time' => '11:00',
'place' => 'テキスト2',
],
[
'id' => 3,
'time' => '12:00',
'place' => 'テキスト3',
]
];
printf('<script> var data_array = %s</script>', json_encode($data)) ;
?>ダウンロードはこちらから
https://github.com/kmtitmk-ux/vue-form/tree/feature/vue-form-0
コメント