プルダウンメニューの処理（昇順・降順）と親子間のデータの受け渡し（$emit）
子コンポーネントから親コンポーネントにデータを渡す$emit
share_file_list.vue（親）にdrop_down_menu.vue（子）のコンポーネントが含まれている。
つまりdrop_down_menu.vueのデータをshare_file_list.vueに渡す
|
- components
| |
| - drop_down_menu.vue
|
- pages
|
- share_file_list.vue
プルダウンメニューの処理（昇順・降順）
プルダウンメニューの表示データ
drop_down_menu.vue(html)
<select v-model="selectedCategory" required @change="dropList"> <option v-for="category in categories" v-bind:key="category.id"> {{ category.name }} </option> </select>
drop_down_menu.vue(script)
data:function(){ return { selectedCategory:'', categories:[ {id:1,name:'タイトル昇順'}, {id:2,name:'タイトル降順'}, {id:3,name:'日時昇順'}, {id:4,name:'日時降順'}, ] } },
@changeはプルダウンメニューに変更があった場合、発火:keyでオブジェクトが移動、削除されても紐づけて処理が可能（崩れることがない）v-model="selectedCategory"は何が選択されたか取得するためにv-modelでバインド
親コンポーネントに表示
子
methods:{ dropList(){ //親コンポーネントへの送り口 this.$emit('select-category',this.selectedCategory) } }
親
// 親コンポーネントの子コンポーネントデータの受け口 <template> <drop-down-menu v-on:select-category="selectCategory"/> </template>
// componentのimport import DropDownMenu from '../components/drop_down_menu' export default { name: 'ShareFileList', components: { DropDownMenu //componentsに追加 }, ~~~~~~~~~~~~~~~~~~~~ methods:{ //valueで取得した値を引数に入れる selectCategory(value){ if(value == 'タイトル昇順'){ //昇順ロジック this.qiitaPosts.sort(function(a,b){ return a.title - b.title }) }
