select options based on another select VueJS Laravel - laravel

Question

I am using VueJs with laravel, I am new in VueJs and i want to display the Categories dynamically whenever i choose any Collection, i am sending API and using Axios, but i cant seem to figure out how to make this work.
Any help will be highly appreciated
<div class="form-group">
<label for="">Collection</label>
<select
class="form-control"
v-model="collection"
#change="getCategory()"
>
<option
v-for="datas in data"
:key="datas.collection_name"
:value="datas.collection_id"
>
{{ datas.collection_name }}
</option>
</select>
</div>
<div class="form-group">
<label for="">Category</label>
<select class="form-control" v-model="category">
<option :value="category">
{{ category_name }}
</option>
</select>
</div>
data() {
return {
category_name: "",
collection: null,
category: null,
};
},
methods: {
getCategory() {
console.log(this.collection);
axios
.get("/api/products")
.then((response) => {
console.log(response.data[0].category_id);
this.category = response.data[0].category_id;
this.category_name = response.data[0].category_id;
})
.catch((err) => {
console.log(err);
});
},
Controller:
public function create(){
$collection = Collection::join('categories','collections.id','=','categories.collection_id')
->select('categories.name as category_name','categories.id as category_id','collections.name as collection_name','collections.id as collection_id')
->get();
return response()->json($collection);
}
Axios response.data output is :

Answer 1

if I got your question very well. You want to dynamically display your categories after choosing collection data that are in laravel backend API.
in your script in vue js
data(){
return {
form: {
collection:'',category: '' //define your v-models here
},
categories:{},
errors: [],
}
},
method:{
getCategories(){
axios.get('/categories/' + this.form.collection).then(response => {
this.categories = response.data
}).catch(errors => {
this.errors = error.response.data.errors
})
},
},
in your template now (html)
<div class="col-lg-6">
<div class="mb-3">
<label class="form-label">collection</label>
<select v-model="form.collection" class="form-control" #change="getCategories()">
<option value="">Select Collection</option>
<option :value="collection.id" v-for="collection in collections" :key="country.id">{{ country.name }}</option>
</select>
<div v-if="errors.collection" class="text-small text-danger"> {{ errors.collection[0] }}</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="mb-3">
<label class="form-label">Category</label>
<div class="form-icon position-relative">
<select class="form-control" v-model="form.category">
<option value="">Select Category</option>
<option :value="category.id" v-for=" categories" :key="city.id">{{ category.name }}</option>
</select>
<div v-if="errors.category" class="text-small text-danger">{{ errors.city_id[0] }}</div>
</div>
</div>
</div>
you better define your v-models with form as I did above it will help you not confusing yourself. example form.collection

Answer 2

This should work.
<template>
<div>
<div class="form-group">
<label for="">Collection</label>
<select
class="form-control"
v-model="collection"
#change="getCategory()"
>
<option
v-for="datas in data"
:key="datas.collection_name"
:value="datas.collection_id"
>
{{ datas.collection_name }}
</option>
</select>
</div>
<div class="form-group">
<label for="">Category</label>
<select class="form-control" v-model="category" v-if="category_list.length > 0">
<option v-for="(category, index) in category_list" :key="index" :value="category.id">
{{ category.category_name }}
</option>
</select>
</div>
</div>
</template>
<script>
export default{
data() {
return {
category: null,
category_list: null
};
},
methods: {
getCategory() {
axios
.get("/api/products")
.then((response) => {
this.category_list = response.data;
})
.catch((err) => {
console.log(err);
});
},
}
</script>