CODEWITHSUNDEEP
vue.jsbootstrap-vue
SVE
SVE

Reputation: 1655

Why bootstrap table example not working for me?

I have a some project with table like this bootstrap table.

Codesandbox

template:

<b-table small :fields="fields" :items="items">
      <template v-slot:cell(index)="data">
        {{ data.index + 1 }}
      </template>

      <!-- A custom formatted column -->
      <template v-slot:cell(name)="data">
        <b class="text-info">{{ data.value.last.toUpperCase() }}</b>, <b>{{ data.value.first }}</b>
      </template>

      <!-- A virtual composite column -->
      <template v-slot:cell(nameage)="data">
        {{ data.item.name.first }} is {{ data.item.age }} years old
      </template>

      <!-- Optional default data cell scoped slot -->
      <template v-slot:cell()="data">
        <i>{{ data.value }}</i>
      </template>
    </b-table>

And script:

fields: [
          // A virtual column that doesn't exist in items
          'index',
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          // A regular column
          'age',
          // A regular column
          'sex',
          // A virtual column made up from two fields
          { key: 'nameage', label: 'First name and age' }
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]

Bootstrap table works. I am copy this code and example not work. And I do not understand why.

Question: So, Why bootstrap table example not working?

Upvotes: 2

Views: 2024

Answers (1)

faradie
faradie

Reputation: 37

Helo, i have same problem. I have some custom fields table, on vue devtools the data has been seen. in vuex bindings. But on custom table no data can appear, just the amount of data available. This is my template code

<template>
  <div class="table-responsive">
    <b-table striped hover :items="todos.data" :fields="fields" show-empty>
      <template slot="jadwal" slot-scope="row">
        <td class="parent-row">{{ row.item.name }}</td>
      </template>
    </b-table>
  </div>
</template>

and this object vuex binding

{"current_page":1,"data":[{"id":1,"name":"Belajar Vue Laravel","note":"Apa aja boleh deh ini deskripsinnya","due_date":"2019-09-30","status":0,"created_at":"2019-09-29 18:23:51","updated_at":"2019-09-29 18:23:51"},{"id":2,"name":"Belajar mengerti kamu","note":"you are my everythings","due_date":"2019-10-01","status":1,"created_at":"2019-09-29 18:23:51","updated_at":"2019-09-29 18:23:51"}],"first_page_url":"http://localhost:8000/api/todo?page=1","from":1,"last_page":1,"last_page_url":"http://localhost:8000/api/todo?page=1","next_page_url":null,"path":"http://localhost:8000/api/todo","per_page":10,"prev_page_url":null,"to":2,"total":2}

Upvotes: 1

Related Questions