How to get value from Dynamic Dropdown and submit it in database in VueJs and Laravel

Question

I am creating a form in which you add cities on the basis of countries you get from dynamic drop-down. I am able to get the category_id (foreign key) in Vuejs but I don't how to pass it to the laravel back-end. I want to create a subcategory object with name and category_id. category_id is foreign key. I am unable to get category_id and it is passing NULL to db.

**Category = Country** 
**Subcategory = City**


<template id="add-post">
  <div>
    <table class="table">
      <thead>
        <tr>
          <th>#</th>
          <th>City Name</th>
          <th>Country id</th>
       </tr>
      </thead>
      <tbody>
        <tr v-for="(subcategory, index) in citylist" :key="subcategory.id">
          <td>{{ index + 1 }}</td>
          <td>{{ subcategory.name }}</td>
          <td>{{ subcategory.category_id }}</td>
        </tr>
      </tbody>
    </table>
    <h3>Add City</h3>
    <form v-on:submit.prevent = "createPost">
      <select v-model="countryid"  name="country" class="form-control" @change="myFunction()">
        <option countryid  disabled>Select Country</option>

        <option v-for="category in categories" v-bind:value='category.id' v-text="category.name">{{category.name}}</option>

      </select> 
      <div class="form-group">
        <label for="add-name">Name</label>
        <input v-model="subcategory.name" class="form-control" required />
      </div>
      <button type="submit" class="btn btn-xs btn-primary">Add City</button>
      <!-- <button v-on:click="setPostId()">click</button> -->
      <router-link class="btn btn-xs btn-warning" v-bind:to="'/'">Cancel</router-link>
    </form>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      categories: [],
      category: '',
      countryid:'',
      subcategories: [],
      subcategory: {name: '', category_id: ''}
    };
  },
  mounted(){
    this.loadCategories()
  },
  created: function() {
    let uri = 'http://localhost:8000/cities/';
    Axios.get(uri).then((response) => {
      this.subcategories = response.data;
    });
  },
  computed: {
    citylist: function(){
      if(this.subcategories.length) {
        return this.subcategories;
      }
    }
  },
  methods: {
    myFunction: function() {
          console.log(this.countryid) 
    },
    loadCategories(){
      axios.get('/api/categories')
      .then(response => this.categories = response.data)
      .catch(error => console.log(error))
    },
    createPost: function() {
      let uri = 'http://localhost:8000/addsubcategory/';
      Axios.post(uri, this.subcategory).then((response) => {
        this.$router.push({name: 'City'})
      })
    }
  }
}
</script>

You're not setting the subcategory.id anywhere in the template? — John Halsey
– John Halsey, Commented Nov 15, 2018 at 15:22
Yeah John you're i just figured this out. Thanks for replying. — Shahroze Ali
– Shahroze Ali, Commented Nov 16, 2018 at 12:38
I forgot to add v-model="subcategory.category_id". In Category Select Option. I was using v-model to display id on console. — Shahroze Ali
– Shahroze Ali, Commented Nov 16, 2018 at 12:39

dhruvin prajapati · Accepted Answer · 2018-12-06 07:05:30Z

1

you can make drop down

<select  v-model="fruit" id="deptList">
 <option v-for="company_master in company_masters.data" v-bind:value="company_master.CompanyId">                                    {{company_master.CompanyName}}
 </option>
 </select>

and call the data with axios like

axios.get("api/company_master").then(response => (this.company_masters = response.data));

also define

company_masters:[],
                fruit:'',

answered Dec 6, 2018 at 7:05

dhruvin prajapati

3311 gold badge4 silver badges17 bronze badges

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

Collectives™ on Stack Overflow

How to get value from Dynamic Dropdown and submit it in database in VueJs and Laravel

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