Vueでいい感じにしたいという動機
3年ほど前
とある業務の中で、JSON形式で取得したリストをjsでぶん回して表を生成することがありまして、
ただ、いい感じにソートとかできたら嬉しいという要望があり、
きっとこれはいちいち画面遷移するような挙動だと実現できない＆jQueryでDOMを書き換えするのも重くなりすぎる、、、
あ、そうだ仮想DOMってやつをやってみようと思って実装した備忘録です。
(実際に業務で使用したものを当たり障りない形に修正しています。)
実際の開発環境は以下
- jQuery1.xx
- BootStrap 3.xx
HTML
画面内ソートするためのinputタグなんかをベタで書いてます。これは参考用
table内のtbodyをv-forで回してリストを生成しています。（これは便利）
<div id="list" v-cloak>
<div>
<div>
<div>
<h4>人数（<span>{{sortedList.length}}</span>件）</h4>
</div>
<div>
<div>
<table class="table table-bordered">
<tr>
<th>管理番号</th>
<td><input type="text" v-model="search01"></td>
<td>
<select v-model="sort01">
<option value=""></option>
<option value="asc">昇順</option>
<option value="desc">降順</option>
</select>
</td>
<th>氏名</th>
<td><input type="text" v-model="search02"></td>
<th>氏名カナ</th>
<td><input type="text" v-model="search03"></td>
</tr>
<tr>
<th>性別</th>
<td>
<select v-model="search04">
<option value=""></option>
<option value="男性">男性</option>
<option value="女性">女性</option>
<option value="その他">その他</option>
</select>
</td>
<th>住所</th>
<td><input type="text" v-model="search05"></td>
<th>出身校</th>
<td><input type="text" v-model="search06"></td>
</tr>
<tr>
<th>趣味</th>
<td><input type="text" v-model="search07"></td>
<th>配偶者</th>
<td><input type="text" v-model="search08"></td>
<th>子供</th>
<td><input type="text" v-model="search09"></td>
</tr>
<th>住まい</th>
<td><input type="text" v-model="search10"></td>
<td colspan="4"></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<table class="table table-bordered">
<thead>
<tr>
<th>写真</th>
<th>管理番号<br/>フリガナ<br/>名前</th>
<th>性別</th>
<th>住所</th>
<th>出身校</th>
<th>趣味</th>
<th>配偶者</th>
<th>子供</th>
<th>住まい</th>
</tr>
</thead>
<tbody>
<tr v-for="person in sortedList">
<td><img v-lazy="person.photo" v-bind:alt="person.name" class="lazy" width="45" /></td>
<td>{{person.id}}<br/>{{person.name_kana}}<br/>{{person.name}}</td>
<td>{{person.gender}}</td>
<td>{{person.address}}</td>
<td>{{person.shcool}}</td>
<td>{{person.hobby}}</td>
<td>{{person.spouse}}</td>
<td>{{person.child}}</td>
<td>{{person.Housing}}</td>
</tr>
</tbody>
</table>
・・・
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
DATA
適当なJSON（適当です。名前も適当）
var membersList = [
{photo:"yamada.png",id:"0001",name:"山田太郎",name_kana:"ヤマダタロウ",gender:"男",address:"東京",shcool:"東京大学",hobby:"旅行",spouse:"いる",child:"なし",Housing:"賃貸マンション"},
{photo:"suzuki.png",id:"0002",name:"鈴木次郎",name_kana:"スズキジロウ",gender:"男",address:"神奈川",shcool:"横浜大学",hobby:"写真",spouse:"なし",child:"なし",Housing:"持ち家"},
{photo:"kobayashi.png",id:"0003",name:"小林花子",name_kana:"コバヤシハナコ",gender:"女",address:"京都",shcool:"立命館大学",hobby:"座禅",spouse:"いる",child:"いる",Housing:"持ち家"}
・・・];
SCRIPT
画面読み込み中に写真が読み込まれるのを待ってると、良さが損なわれる気がしたので、レイジーロード探して、実装しました。
Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dummy.png',
loading: 'dummy.png',
attempt: 1
});
当たり障りない感じに変えていますが、
実装の記述に近い形で書いています。もう少しスマートにできないものか、、、
var app1 = new Vue({
el:'#list'
,data:{
search01:''
,search02:''
,search03:''
,search04:''
,search05:''
,search06:''
,search07:''
,search08:''
,search09:''
,search10:''
,sort01:''
,members:membersList
}
,computed:{
filteredList01: function(){ //管理番号
return this.members.filter(function(item){
return item.id.indexOf(this.search01) > -1
}, this)
}
,filteredList02: function(){ //氏名
return this.filteredList01.filter(function(item){
return item.name.indexOf(this.search02) > -1
}, this)
}
,filteredList03: function(){ //氏名カナ
return this.filteredList02.filter(function(item){
return item.name_kana.indexOf(this.search03) > -1
}, this)
}
,filteredList04: function(){ //性別
return this.filteredList03.filter(function(item){
return item.gender.indexOf(this.search04) > -1
}, this)
}
,filteredList05: function(){ //住所
return this.filteredList04.filter(function(item){
return item.address.indexOf(this.search05) > -1
}, this)
}
,filteredList06: function(){ //出身校
return this.filteredList05.filter(function(item){
return item.shcool.indexOf(this.search06) > -1
}, this)
}
,filteredList07: function(){ //趣味
return this.filteredList06.filter(function(item){
return item.hobby.indexOf(this.search07) > -1
}, this)
}
,filteredList08: function(){ //配偶者
return this.filteredList07.filter(function(item){
return item.spouse.indexOf(this.search08) > -1
}, this)
}
,filteredList09: function(){ //子供
return this.filteredList08.filter(function(item){
return item.child.indexOf(this.search09) > -1
}, this)
}
,filteredList10: function(){ //住まい
return this.filteredList09.filter(function(item){
return item.Housing.indexOf(this.search10) > -1
}, this)
}
,sortedList: function(){ //ソート後のデータを返す算出プロパティ sortedList
var copy = this.filteredList10.slice()
if(this.sort01 === 'asc' ){
//comparatorAsc01 メソッドをコールバックとして sort 関数に渡す
return copy.sort(this.comparatorAsc01)
}else if(this.sort01 === 'desc') {
//降順に並べ替えるためのコールバック関数は comparatorDesc02
return copy.sort(this.comparatorDesc02)
}else{
return copy
}
}
}
,methods:{
comparatorAsc01: function(itemA, itemB){ //昇順
if(itemA.id < itemB.id){
return -1
} else if(itemA > itemB.id){
return 1
} else{
return 0
}
}
,comparatorDesc02: function(itemA, itemB){ //降順
if(itemA.id > itemB.id){
return -1
} else if(itemA < id){
return 1
} else{
return 0
}
}
}
});
結果
記述は改善の余地があると思いますが、
機能としては満足いただいていたかと思います。
本来、選んだあと画面が再リロードして検索結果が表示されることしかできなかったものが
選んだ瞬間に表が入れ替わる様は思わず「おお」となりました。
無事にIEでも動きましたとさ。。。よかった。
まだまだ世の中、レガシーな環境はあるということで、
少しずつ良くしていければいいなと思います。
おわり