filter関数とは
配列の中身を特定の条件で絞り込みを行うメソッド。
配列.filter
(絞り込む関数（変数) //←この変数は配列を一つ一つ取り出した要素が入る
{絞り込み処理}) //上の行の「絞り込む関数」でこの行の「絞り込み処理」を呼び出している
今回のテーマ：子に配列を渡してデータを判別してもらう
Vue.js プロップスの話で親子コンポーネントのプロップスについて説明した。
今回は、プロップスのデータを配列にして、
カテゴリーを分けて、データを受け取りたい。
親コンポーネントを準備
今回は子にお使いをしてきてもらうので、買い物リストを作成します。
買い物リストには買うものの名前と、売り場を示すcategoryを追加しました。
Parent.vue
<template>
<Child :list = list></Child>
</template>
<script>
import Child from "../components/Child";
export default {
components:{Child},
data(){
return{
list:[
{name:"りんご",category:"果物"},
{name:"砂糖",category: "調味料"},
{name:"いちご",category:"果物"}
]
}
}
}
</script>
子コンポーネントを準備
複数のものをリストアップされてるので。今回はArrayで受け取ります。
もらったリストを使って、お店の人に「〇〇ください」と伝えます。
Child.vue
<!--Parent.vueの子コンポーネント-->
<template>
<div>
{{lists[0].name}}ください
</div>
</template>
<script>
export default {
components:{},
data:function(){
return{}
},
props:{
lists:{type:Array}
}
}
</script>
v-for ="変数 in 配列"
v-forは、foreach文みたいなもの。v-bindでkeyを設定しなきゃいけない。
第二引数として配列のインデックスを受け取ることができる。
区切る文字inはofでもいい。
v-forが指定した要素の中で、配列の中身をとりだして、それぞれに処理を行う。
繰り返したくないものは要素の外に出してあげる。
Child.vue
スーパーにて、
<div v-for="list in lists" v-bind:key="list.name"> //v-bindは省略できるので、:key=とも書くことができる。
{{list.name}}ください
</div>
スーパーなら上記のコードですべてが揃うけど、
今は果物屋にいるので、果物だけをピックアップして、「ください」と言いたい。
#改めてfilter関数
配列.filter
(絞り込む関数（変数)
{絞り込み処理})
今回、categoryが"果物"のものだけをピックアップしたい。
Child.vue
<script>
computed:{
fruits:function () { //fruitsがfilter関数でピックアップしたものだけが入る変数
return this.lists.filter( //配列listsからfilter関数で値を返してください
function (value) { //valueを使ってfunctionという処理を行う。valueはlists）（配列）を一つ一つバラバラにしたものです
return value.category ==="果物" //valueのcategoryが"果物"と完全一致したものだけを返します
}
</script>
上記のコードで配列listsの中で、categoryが果物になっているものだけがfruitsに入りました。
ちなみに
computed（算出プロパティ）はmethodみたいなものだけど、methodは毎回処理される。
computedはデータが変わったら処理される。