Question

我正在创建一个表单，您可以在其中根据从动态下拉列表中获得的国家/地区添加城市。我可以在Vuejs中获得category_id（外键），但是我不知道如何将其传递给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之类的调用数据

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

还定义

company_masters:[],
                fruit:'',

如何从Dynamic Dropdown获取价值并将其提交到VueJs和Laravel中的数据库中

1 个答案: