[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option

I'm new to Vue and I am following a couple of tutorials to create a project where the user will be able to filter the data in the database by selecting some parameters.

I successfully fetched data from Api using axios and its working perfectly when I checked the Chrome Vue Devtool, but I'm receiving the following error when I tried to render the data into a table:

[Vue warn]: Property or method "item" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Here are the relevant snippets from my code:

resources\assets\js\app.js


Vue.component(
    'enquirytable',
    require('./components/reports/enquirytable.vue')
);

resources\assets\js\components\reports\enquirytable.vue


<template>
    <div class="vue-filter-container">
        <div class="vue-filter-content">
            <filterable v-bind="filterable" class="vue-filter-component" >
                <thead slot="thead">
                    <tr>
                        <th>Name</th>
                        <th>Created At</th>
                    </tr>
                </thead>

                <tr slot-scope="{item}">
                    <td>{{item.name}}</td>
                    <td>{{item.created_at}}</td>
                </tr>

            </filterable>
        </div>
    </div>
</template>

<script type="text/javascript">

    import Filterable from './filter.vue'

    export default {
        components: {Filterable},

        props: {
            getdataurl: {
                type: String,
                required: true
            },
        },

        data() {
            return {
                filterable: {
                    url: this.getdataurl,
                }
            }
        },

    }
</script>

resources\assets\js\components\reports\filter.vue


<template>
    <div class="filterable">
        <div class="box">
            <div class="box-body">
                <table class="vue-table">
                    <slot name="thead"></slot>

                    <tbody>
                        <slot v-if="collection.data && collection.data.length" v-for="item in collection.data"
                          :item="item"></slot>
                    </tbody>
                </table>
            </div>
	</div>
    </div>
</template>

<script type="text/javascript">

    import Vue from 'vue'
    import axios from 'axios'


    export default {

        props: {
            url: String
        },

	data() {
            return {
                loading: true,

                query: {
                    order_column: 'created_at',
                    order_direction: 'desc',
                    filter_match: 'and',
                    limit: 10,
                    page: 1
                },
                collection: {
                    data: []
                }
            }
        },

	mounted() {
            this.fetch()
        },

	fetch() {
                this.loading = true

                axios.get(this.url, {params: params})
                    .then((res) => {
                        Vue.set(this.$data, 'collection', res.data.collection)
                        this.query.page = res.data.collection.current_page
                    })
                    .catch((error) => {

                    })
                    .finally(() => {
                        this.loading = false
                    })
            },

resources\view\welcome


	<body>
       		<div id="root"></div>
    	</body>

iajohn

5 years ago

Best Answer

Level 3

I have been able to solve it myself, but I don't know if it is the best way to do it

here is my solution:

Since I know the error is due to the undefined property 'item' that i referenced in enquirytable.vue. So in resources\assets\js\components\reports\enquirytable.vue, I comment out ( tr tag where I used slot-scope="{item}" )


<template>
    <div class="vue-filter-container">
        <div class="vue-filter-content">
            <filterable v-bind="filterable" class="vue-filter-component" >
                <thead slot="thead">
                    <tr>
                        <th>Name</th>
                        <th>Created At</th>
                    </tr>
                </thead>

                <!-- <tr slot-scope="{item}"> -->
                <!--    <td>{{item.name}}</td> -->
                <!--    <td>{{item.created_at}}</td> -->
                <!-- </tr> -->

            </filterable>
        </div>
    </div>
</template>

And in resources\assets\js\components\reports\filter.vue, I comment out slot tag and used the tr tag directly


<template>
    <div class="filterable">
        <div class="box">
            <div class="box-body">
                <table class="vue-table">
                    <slot name="thead"></slot>

                    <tbody>
                        <template v-if="collection.data && collection.data.length" 
			v-for="item in collection.data">
                            <tr>
                                <td>{{ item.id}}</td>
                                <td>{{ item.name}}</td>
                                <td>{{ item.created_at}} </td>
                            </tr>
                        </template>
			
			<!--<slot v-if="collection.data && collection.data.length" 
				v-for="item in collection.data"
                         	:item="item"></slot>-->
			
                    </tbody>
                </table>
            </div>
	</div>
    </div>
</template>

with the above solution it work fine

Please or to participate in this conversation.