vue.js 属性或方法未定义

Question

我正在创建（在带有引导程序的 vue.js 中）一个简单的应用程序来添加/编辑/删除列表中的项目。我收到一个错误：“[Vue 警告]：属性或方法“项目”未在实例上定义，但在渲染期间被引用。确保此属性是反应性的，无论是在数据选项中，还是在类中 -基于组件，通过初始化属性"。

编辑按钮和搜索输入正常工作。提交按钮正在将新行添加到表中，但未添加数据。

你能告诉我应该改变什么吗？

Answer 1

数据没有添加到表中，因为基本上，您在 addNewItem 方法中添加了空属性。

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

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

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' }
            ],
        }
    }
}

所以，在输入模型中，而不是 items.property_name 使用 item.property_name

<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);
 }

Answer 2

您的 DataTable 组件有一个 :items 道具，但您尚未在实际组件中定义任何道具。我看到您的数据选项中有一个 items 数组，因此如果您将 items 道具 :items="items" 一起删除，应该很好。