chapter 15 LessonCreateCategory.vue

LessonCreateCategory.vue

<template>
    <div>

        <!-- Category Select Form -->

        <div class="form-group">

            <label for="category_id">Category Name:</label>

            <select v-model="selected"
                    class="form-control"
                    name="category_id">

                <option value="">Please Choose One</option>

                <option  v-for="catoption in catoptions"
                         v-bind:value="catoption.id"
                         >{{ catoption.name }}</option>

            </select>


        </div>

        <!-- Subcategory Select Form -->

        <div class="form-group" v-if="selected > 0">

        <label for="subcategory_id">Subcategory Name:</label>

        <select class="form-control" name="subcategory_id">

            <option value="">Please Choose One</option>

            <option v-for="suboption in suboptions"
                    v-bind:value=" suboption.id ">
                    {{ suboption.name }}</option>

        </select>

        </div>

    </div>

</template>

<script>

    export default {

        props: ['subcategories', 'categories'],

        data () {

            return {


                selected : '',

                suboptions: [],

                catoptions: []


            }

        },

        methods: {

            filterSubcategories () {

                this.suboptions = this.subcategories
                .filter(subcategories => subcategories.category_id == this.selected);

            }

        },

        watch: { 'selected': function() {

                this.filterSubcategories();

                }

        },


        created () {

            this.catoptions = this.categories;

        }
    }

</script>