vue.js 屬性或方法未定義

Question

我正在創建（在 vue.js 中使用 bootstrap）一個簡單的應用程序來添加/編輯/刪除列表中的項目。 我收到一個錯誤：“ [Vue 警告]：屬性或方法“items”未在實例上定義，但在渲染期間被引用。確保此屬性是反應性的，無論是在數據選項中，還是對於基於類的組件，通過初始化屬性“。

編輯按鈕正常工作，以及搜索輸入。 提交按鈕正在向表中添加新行，但未添加數據。

你能建議我應該改變什么嗎？

Answer 1

您的 DataTable 組件有一個:items道具，但您尚未在實際組件中定義任何道具。 我看到你的數據選項中有一個 items 數組，所以如果你刪除 items prop :items="items"應該很好。

Answer 2

數據不會添加到表中，因為基本上，您是在 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);
 }