kmmkの雑種系日記

学習まとめです。

プルダウンメニューの処理(昇順・降順)と親子間のデータの受け渡し($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
       })
    }
  1. 子:$emit('カスタムメソッド名','渡したいデータ')ー 親:<drop-down-menu v-on:カスタムメソッド名="親で実行するメソッド名・データ名"/>
  2. selectCategory(value)valueは受け取ったデータが入る
  3. 昇順ロジック