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