I have dependent selection like this. Selection image when i console log, they have data but not render data in selection data
This is what i ve tried. for Product selection has default selected value that get from axios
<tr v-for="(item, index) in form.products" v-if="Object.keys(form.products).length >= 0">
<td>
<select class="form-control" v-model="item.product_code"
id="product_name" placeholder="Select Product Name" required>
<option :value="null" disabled>-- Please select product name -- </option>
<option v-for="(option, i) in all_products" :value="option.product_code" :key="i" :selected="item.product_code"">
({{ option.product_code }}) {{ option.product_name }}
</option>
</select>
</td>
This is my product box and method
<td>
<select class="form-control" v-model="item.box_code" id="product_name" placeholder="Select Product Name" required>
<option :value="null" disabled>-- Please select Box -- </option>
<option v-for="(option, index) in get_box(item.product_code, index)" :value="option.box_code" :key="index">
{{ option.box_code }}
</option>
</select>
</td>
method
methods: {
get_box(item){
this.$axios.get(`/v2/product/box?product_code=${item}`)
.then(response =>{
return response.data
})
},
......
It get data but not render in selection. Thank you