select options based on another select VueJS 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 :

Where is your getCategory method defined? What is the sample data returned? — Terry
– Terry, Commented Jun 28, 2021 at 12:19
What about the logic for your getCategory() method? Please see How to Ask. — Terry
– Terry, Commented Jun 28, 2021 at 12:26

WillianBabuu · Accepted Answer · 2021-06-29 12:10:05Z

2

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

edited Jun 29, 2021 at 12:10

answered Jun 28, 2021 at 13:12

WillianBabuu

4375 silver badges9 bronze badges

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

4 Comments

Harout deurdulian Over a year ago

I did not get this part axios.get('/categories/' + this.form.collection).then(response => { this.categories = response.data

WillianBabuu Over a year ago

that means you are get category which matches the collection_id, but that collection_id you get from v-model of @onChange method. I advised in question that use form.collection v-model so that you won't interchange the variables

Harout deurdulian Over a year ago

Amazing, i appreciate your help

WillianBabuu Over a year ago

it is my pleasure

Subham Chakraborty · Accepted Answer · 2021-06-28 13:39:28Z

0

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>

answered Jun 28, 2021 at 13:39

Subham Chakraborty

678 bronze badges

2 Comments

Harout deurdulian Over a year ago

It did not work, it is showing all the categories

Subham Chakraborty Over a year ago

This is what you needed as of I understand from your question. You want to show all the categories that belongs to a particular collection. If this is showing all your categories from all other collections, then blame your API method, not my suggestion please. I can see in your controller method, you haven't filtered the categories using where clause. You should return categories that belongs to the collection. And, I don't understand why you need to join.

Collectives™ on Stack Overflow

select options based on another select VueJS Laravel

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related