Как получить значение из Dynamic Dropdown и отправить его в базу данных в VueJs и Laravel

Question

Я создаю форму, в которой вы добавляете города на основе стран, которые вы получаете из динамического раскрывающегося списка.Я могу получить category_id (внешний ключ) в Vuejs, но я не знаю, как передать его в серверную часть Laravel.Я хочу создать объект подкатегории с name и category_id.category_id - это внешний ключ.Я не могу получить category_id, и он передает NULL в дБ.

**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>

Answer 1

Вы можете сделать раскрывающийся список

<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>

и вызвать данные с аксиосами, например

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

, также определить

company_masters:[],
                fruit:'',