Dependent dropdown in continuous form

Hello there

I know how to create dependent dropdown using Laravel and Vuejs but my project has a page that is like parent-child form.

It is like this, first dropdown is Product and the second one is Brand. For example in Product we have Tire and Battery, and in Brand we have brands of Tire or Battery.

So user can add as many rows as he wants in child form therefore when user selects an item from first dropdown all the other rows of dropdowns will update.

Thanks in advanced

Armani

5 years ago

Level 17

I figured it out myself, I created a component for child form like this:

<template>
    <div class="row">
        <div class="col-md-2">
            <div class="form-group form-group-default required">
            <label>Product</label>
            <select class="form-control custom-select" name="product_id[]" @change="getBrand" required>
                <option></option>
                <option v-for="product in myProducts" :value="product.id">{{ product.name }}</option>
            </select>
          </div>
        </div>
        <div class="col-md-2">
            <div class="form-group form-group-default required">
            <label>Brand</label>
            <select class="form-control custom-select" name="brand_id[]" required>
                <option></option>
                <option v-for="brand in filteredBrand" :value="brand.id">{{ brand.name }}</option>
            </select>
          </div>
        </div>
        <div class="col-md-1 d-flex align-items-center justify-content-center">
            <a href="" class="btn btn-success input-sm mr-2" data-tooltip="tooltip" data-placement="top" title="Add new" @click.prevent="$emit('add')"><i class="fa fa-plus"></i></a>
            <a href="" class="btn btn-danger input-sm" data-tooltip="tooltip" data-placement="top" title="Add new" @click.prevent="$emit('remove')"><i class="fa fa-minus"></i></a>
        </div>
  </div>
</template>

And added the component to parent form like this:

<product v-for="(detail, index) in details" :key="index" :products="{{ $products }}" :brands="{{ $brands }}" @add="addItem" @remove="removeItem(index)"></product>

And everything works fine but when I click remove beside each instance of component it won't remove the one I clicked, it will remove the last one.

and this it the removeItem method:

removeItem(index){
                if (this.details.length > 1) {
                    this.details.splice(index, 1);
                }
            }

Any help?

This is an online example: https://codesandbox.io/s/great-elbakyan-d0xt5?file=/index.html:0-2914