Vueでリスト検索とソート機能を作ってみたので
さらに応用して、phpの配列データからVueに流し込んで処理した機能を作ってみました。
ロジック
php配列データ
↓
JSONデータに変換
↓
JSONデータをJSの配列に格納
↓
JSの配列をvueのdataに格納
これでvueで取り扱えるデータになりました。
computed(算出プロパティ)
matched：
フォーム入力の数値 <= budgetの数値のリストのリストを表示
sorted：
ボタンのオンオフで昇順・降順ソート
limited：
limit数分表示できる
<?php
$list = [
['id' => '1', 'name' => '商品A', 'price' => '500'],
['id' => '2', 'name' => '商品B', 'price' => '300'],
['id' => '3', 'name' => '商品C', 'price' => '2000'],
['id' => '4', 'name' => '商品D', 'price' => '5000'],
['id' => '5', 'name' => '商品E', 'price' => '1500'],
['id' => '6', 'name' => '商品F', 'price' => '250'],
['id' => '7', 'name' => '商品G', 'price' => '100'],
['id' => '8', 'name' => '商品H', 'price' => '750'],
];
$list_json = json_encode($list);
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Vue App</title>
</head>
<body>
<div id="app">
<input v-model.number="budget">円以下
<p>{{ matched.length }}件表示中</p>
<button v-on:click="order=!order">価格 ▼</button>
<div v-for="item in limited" v-bind:key="item.id">
{{ item.name }}: {{ item.price }}円
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
<script>
let list = JSON.parse('<?php echo $list_json; ?>');
const app = new Vue({
el: '#app',
data: {
// 検索初期値
budget: '',
// 検索数
limit: 10000000000000,
// 検索リスト
list: list,
// ソート初期値
order: false,
},
computed: {
matched: function() {
return this.list.filter(function(el) {
return el.price <= this.budget
}, this)
},
sorted: function() {
return _.orderBy(this.matched, 'price', this.order ? 'desc' : 'asc')
},
limited: function() {
return this.sorted.slice(0, this.limit)
}
}
});
</script>
</body>
</html>
phpを使用せずVueだけで作ったコードもありますので
こちらを参照してください。
[Re:ゼロから始めるVue生活]メモ