How to get object relation inside <option> loop in Vue?

Question

Let's go to the point of the question. I have a selection component, it looks like this:

<template>
  <div class="row">
    <div class="col-md-6">
      <div class="form-group">
        <label for="category_id">
          Product Category
        </label>

        <select
          name="category_id"
          id="category_id"
          :class="form.errors.has('category_id') ? 'form-control is-invalid' : 'form-control'"
          v-model="form.sharedState.category_id">

          <option value="" disabled hidden>Select Category</option>
          <option
            v-for="category in categories"
            :key="category.id"
            v-text="category.name"
            :value="category.id"
            @click="$emit('category-selected', category.sub_categories)">
          </option>

        </select>

        <small
          class="form-text text-danger"
          v-if="form.errors.has('category_id')"
          v-text="form.errors.get('category_id')"></small>

      </div>
    </div>
    <div class="col-md-6">
      <div
        class="form-group"
        v-if="revealSubCategory"
        @category-selected="show">

        <label for="category_id">
          Sub Category
        </label>

        <select
          name="sub_category_id"
          id="sub_category_id"
          :class="form.errors.has('sub_category_id') ? 'form-control is-invalid' : 'form-control'"
          v-model="form.sharedState.sub_category_id">

          <option value="" disabled hidden>Select Sub Category</option>

          <option
            v-for="subcategory in subcategories"
            :key="subcategory.id"
            v-text="subcategory.name"
            :value="subcategory.id">
          </option>

        </select>

        <small
          class="form-text text-danger"
          v-if="form.errors.has('category_id')"
          v-text="form.errors.get('category_id')"></small>

      </div>
    </div>
  </div>
</template>
<script>
import BaseCard from './BaseCard.vue';

export default {
  components: {
    BaseCard
  },
  data() {
    return {
      categories: [],
      revealSubCategory: false,
      subcategories: [],

      form: new Form({
        sharedState: product.data
      })
    }
  },
  mounted() {
    this.getCategories();
  },
  methods: {
    getCategories() {
      axios.get('categories')
        .then(({data}) => this.categories = data);
    },
    show(subcategories) {
      this.revealSubCategory = true;
      this.subcategories = subcategories
    }
  }
}
</script>

And a select sub category input (it is there on the second column) which is will be displayed once the user has selected one of the categories options. Each category option has relation to sub categories taken from the API.

How can I get the sub categories and display the input? I already tried @change on the select tag but I can't pass the sub category object because it is outside the loop. And @click event seems to be not working in an option tag.

Answer 1

You can watch the v-model of the first select and change subcategory.

watch:{
  "form.sharedState.category_id": function (val) {
     // update subcategories here
 }