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.

Radu Diță · Accepted Answer · 2019-03-19 10:23:17Z

1

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

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

answered Mar 19, 2019 at 10:23

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related