数据不会添加到表中，因为基本上您是在addNewItem方法中添加空属性。

addNewItem() {
    this.items.push({
        id: '',
        age: '',
        first_name: '',
        last_name: ''
     });
 }

items list变量是您要插入所有项目的位置。对于表单数据，您应该创建另一个变量来捕获它们，然后将单个对象推送到列表中：

export default{
    data(){
        return{
            // single object where you are going to catch form data
            item:{
              id: null,
              age: null,
              first_name: '',
              last_name: ''
            }

            // Your list of objects
            items: [
              { id: 1, age: 40, first_name: 'Dickerson', last_name: 'Macdonald'},
              { id: 2, age: 21, first_name: 'Larsen', last_name: 'Shaw' },
              { id: 3, age: 89, first_name: 'Geneva', last_name: 'Wilson' },
              { id: 4, age: 38, first_name: 'Jami', last_name: 'Carney' }
            ],
        }
    }
}

因此，在输入模型中使用www.example.com _name而不是items.property_item.propertyname

<b-form inline>
    <b-form-input
        v-model="item.id"
        requierd
        placeholder="Id"
    ></b-form-input>
    <b-form-input
        v-model="item.age"
        requierd
        placeholder="Age"
    ></b-form-input>
    <b-form-input
        v-model="item.first_name"
        requierd
        placeholder="First Name"
     ></b-form-input>
     <b-form-input
        v-model="item.last_name"
        requierd
        placeholder="Last Name"
     ></b-form-input>
   </b-form>

然后在addNewItem（）方法中将单个对象推入列表

addNewItem() {
    this.items.push(this.item);
 }

您的DataTable组件有一个:items属性，但是您没有在实际组件中定义任何属性。我看到您在data选项中有一个items数组，所以如果您将items属性:items="items"一起删除，应该就可以了。

为了记录在案，我从Vue.js得到了错误行为，错误如下：

[Vue warn]: Property or method "****" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

原来的原因是我有一个空的脚本标签在我的.vue文件结束

<script></script>

Webkit似乎只使用导出对象的最后一个脚本元素。