CODEWITHSUNDEEP
vuejs2
ILya
ILya

Reputation: 121

Error with prop definition in vuejs

I use datatable (https://github.com/pstephan1187/vue-datatable) component in VueJs 2. My component is the following:

<template>
    <div>

        <div id="desktop">
            <div v-if="visibility.personsTable">
                <datatable-persons
                        :columns="persons_table_columns"
                        :data="rows"
                        filterable paginate
                ></datatable-persons>
            </div>

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

<script>
    import VueJsDatatable from 'vuejs-datatable';

    import Profile from './user/Profile';
    import ConnectionService from '../components/services/ConnectionService';
    const connectionService = new ConnectionService();

    Vue.component('showuser', {
        template: `
        <button class="btn btn-xs btn-primary" @click="goToUpdatePage">Профиль</button>
    `,
        props: [row],
        methods: {
            goToUpdatePage: function(){

            }
        }
    });

    export default {
        components: {            
            datatablePersons: VueJsDatatable,
            usersTable: VueJsDatatable,
        },

        data() {
            return {


                    rows: [],
                    persons_table_columns: [
                        {label: 'id', field: 'id'},
                        {label: 'Имя', field: 'firstname'},
                        {label: 'Фамилия', field: 'lastname'},
                        {label: 'Отчетство', field: 'middlename'},
                        {label: 'Профиль', component: 'showuser'}
                    ],


                visibility: {
                    personsTable: false,
                }
            }
        },

        methods: {
            showPersons() {

            this.$http.get(hostname + 'name=person_list&session_id=' + 

sessionApiId).then(response => {
                    this.rows = connectionService.renderMultipleInstances(response.body);
                    this.visibility.usersTable = false;
                    this.visibility.personsTable = true;
                }, response => {
                    // error callback
                });
            },           
        }

    }
</script>

I have the following error: Uncaught ReferenceError: row is not defined at Object.defineProperty.value (app.js:5309) at webpack_require (app.js:20)

Due to documentation of "table" component, it should watch for "row prop" And using official example it works properly.

Upvotes: 0

Views: 242

Answers (1)

Slim
Slim

Reputation: 1964

In the definition of your showuser component props should be an array of strings:

props: ['row']

These strings should match the names of the attributes you use to pass data to the component.

Also from the sinppet I would guess you want it to be 'rows' not 'row'.

Upvotes: 1

Related Questions