Unable to pass data into table with Bootstrap Vue


#1

Hello,

I am a bit lost there, I thought it would be easy but it turns out it is not(at least for me…)

I would like to pass data to a table using boostrap vue from here:
https://bootstrap-vue.js.org/docs/components/table#items-record-data

Here is my component:

<template>
    <div>
        <h1>View blog posts</h1>
        <b-table
                show-empty
                stacked="md"
                :items="blogPosts"
                :fields="fields"
                :current-page="currentPage"
                :per-page="perPage"
        >
            <template slot="id" slot-scope="row">
                {{ row.value.id }}
            </template>

            <template slot="date" slot-scope="row">
                {{ row.value.date }}
            </template>

            <template slot="title" slot-scope="row">
                {{ row.value.title }}
            </template>

            <template slot="image" slot-scope="row">
                {{ row.value.image }}
            </template>

            <template slot="status" slot-scope="row">
                <b-button variant="success">{{ row.value.status }}</b-button>
            </template>

            <template slot="edit" slot-scope="row">
                <b-button variant="warning">{{ row.value.edit }}</b-button>
            </template>

            <template slot="delete" slot-scope="row">
                <b-button variant="danger">{{ row.value.delete }}</b-button>
            </template>

        </b-table>

        <b-row>
            <b-col md="6" class="my-1">
                <b-pagination
                        :total-rows="totalRows"
                        :per-page="perPage"
                        v-model="currentPage"
                        class="my-0"
                />
            </b-col>
        </b-row>
    </div>
</template>

<script>
    import { mapState } from 'vuex';

    export default {
        data() {
            return {
                blogPosts: [],
                fields: [
                    { key: 'id', label: 'id', class: 'text-center'},
                    { key: 'date', label: 'Date', class: 'text-center'},
                    { key: 'title', label: 'Title', class: 'text-center'},
                    { key: 'image', label: 'Image', class: 'text-center'},
                    { key: 'status', label: 'Status', class: 'text-center'},
                    { key: 'edit', label: 'Edit', class: 'text-center'},
                    { key: 'delete', label: 'Delete', class: 'text-center'},
                ],
                currentPage: 1,
                perPage: 5,
                totalRows: blogPosts.length,
                pageOptions: [5, 10, 15]
            }
        },
        computed: mapState([
            'blogPosts'
        ]),
    }
</script>

In my vuex store I have this:

state: {
        blogPosts: [
            {
                id: 1,
                date: '03/02/2019',
                title: 'This is my first title',
                image: 'This is my first image',
                status: 'Live',
                edit: 'Edit',
                delete: 'Delete'
            },
            {
                id: 2,
                date: '03/02/2019',
                title: 'This is my first title',
                image: 'This is my first image',
                status: 'Paused',
                edit: 'Edit',
                delete: 'Delete'
            },
            {
                id: 3,
                date: '03/02/2019',
                title: 'This is my first title',
                image: 'This is my first image',
                status: 'Live',
                edit: 'Edit',
                delete: 'Delete'
            }
        ]
    },

The result I am getting is that I see 3 rows, so something is working but the content does not display.
I believe it is the way I call the blogPosts but I cannot work out what am I doing wrong:

Thank you in advance for you help.


#2

You are using row.value, but according the documentation the name of the property is item.

This should work.

  <template slot="date" slot-scope="row">
                {{ row.item.date }}
   </template>

Besides that, when working with slots you can use the pre html tag to “debug” the slot-scope object.

  <template slot="date" slot-scope="row">
               <pre> {{ row }}</pre>
   </template>

This way you can see the full object in your html :wink:


#3

You are a king!!!
Thank you so much.

The {{ row }} debug is superb!!wow.