0

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?

3 Answers 3

1

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);
 }
Sign up to request clarification or add additional context in comments.

Comments

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.

3 Comments

Thank you for the reply. I've removed the items prop and now I don't get an error. I'm still looking for the idea why Submit button add the empty row to the table without the data from b-form-inputs. I think that there is some mistake in the <b-form inline>, it doesn't transfer the date to the addNewItem method.
Change your v-models from items to item, you're overriding your items in your data options by using it in your v-models. Then add item: {} to your data option, then inside of your addNewItem() method push the item like so this.items.push(this.item);
Here is a sandbox of it working codesandbox.io/s/nostalgic-black-h74xh
0

For the record, I was getting buggy behavior from Vue.js, with errors like this:

[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.

Turned out reason was I had an empty script tag at the end of my .vue file

<script></script>

Looks like the webkit only uses the last script element for the export object.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.