Norbertho
3 months ago
494
3
Vue

Filtering an array of objects

Posted 3 months ago by Norbertho

Hi, I have categories and subcategories. I would like to select the category and based on selected category i would like to show a select of subcategories.

So here is my template

<div class="form-group">
    <label for="category">Select a category</label>
    <select class="form-control" id="category" v-model="form.category_id">
      <option v-for="category in this.categories" :value="category.id">{{category.name}}</option>
    </select>
  </div>

<div class="form-group">
    <label for="category">Select a subcategory</label>
    <select class="form-control" id="subcategory" v-model="form.subcategory_id">
      <option v-for="subcategory in filteredSubcategories" :value="subcategory.id">{{subcategory.name}}</option>
    </select>
  </div>

And I am not sure what is the best approach to filter the subcategories based on selected category_id I have a category_id in subcategories (i have one to many relationship set)

<script>
export default {
    props: ['categories', 'subcategories'],
    data(){
        return{
            form: new Form({
                category_id:'1',
        subcategory_id: '',
            })
        }
    },

 computed: {
        filteredSubcategories: function() { 

        }
    }
}
</script>

Please sign in or create an account to participate in this conversation.