vue.js Property or method is not defined

Question

I'm creating (in vue.js with bootstrap) an simple app to add/edit/remove items from the list. I am getting an error: "[Vue warn]: Property or method "items" 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".

The edit button works properly, as well as Search input. The Submit button is adding the new row to the table, however the data are not added.

Can you please advise what should I change?

Answer 1

Your DataTable component has a :items prop but you haven't defined any props inside of your actual component. I see that you have an items array inside of your data option so if you remove the items prop :items="items" all together it should be good to go.

Answer 2

The data is not added to the table because basically, you are adding empty properties in addNewItem method.

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

The items list variable is where you are going to insert all your items. For the form data, you should create another variable to catch them and then push the single object to the 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' }
            ],
        }
    }
}

so, in the input models instead of items.property_name use 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>

then in the addNewItem() Method push the single object to the list

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