通过发布axios请求将新行插入数据库中-Vue-Laravel

时间:2019-05-28 16:03:58

标签: database vue.js axios v-model

我创建了某种可选表。我正在尝试将新创建的行中的数据提交到数据库。 现在,我想我只是遍历所有字段并只显示空的输入字段,而没有将它们链接到列名。然后如何将数据正确地插入数据库?这样甚至可以做到吗? 当有人按下新行时,我可以再次输入字段,但这似乎不是很有效。有没有更好的办法? 感谢您的帮助!

我的代码:

 <b-table class="col-sm-12 table-sm" show-empty striped hover stacked="md" tbody-tr-class="addPointer"
                :items="species"
                :fields="fields"
            >
            <template slot="bottom-row" >
                <td v-for="field in fields" :key="field.key">
                    <input class="col-sm" type="text" v-model="newItem[]">
                </td>
                <button type="button" value="add" class="btn btn-success" @click="addNewItem()">+ New Item</button> 
            </template>
             <template slot="name" slot-scope="row">
                <input class="col-sm" type="text"  v-model="row.item.name">
            </template>
            <template slot="availability" slot-scope="row">
               <input class="col-sm" type="text"  v-model="row.item.availability">
            </template>
            </b-table>

            <script>   
            import { async } from 'q';
                export default {
                    props: ['speciesdata'],
                    data() {
                        return {
                            species: this.speciesdata,
                            fields: {
                                name: {
                                    label: "Name",
                                    sortable: true

                                availability: {
                                    label: "Available",
                                    sortable: true,
                                    class: "text-center"
                                },  
                                actions: {
                                    class: "options-column",
                                    sortable: false,
                                }            
            },
            methods: {

                addNewItem: async (context) => {
                    axios.post('/specie', {
                        name: this.newItem.name,
                        availability: this.newItem.availability

                    })

0 个答案:

没有答案