ratiw / vue-table

data table simplify! -- vuetable is a Vue.js component that will automatically request (JSON) data from the server and display them nicely in html table with swappable/extensible pagination component.
MIT License
1.83k stars 303 forks source link

The computed property "fields" is already defined as a prop. #171

Closed Geowan closed 6 years ago

Geowan commented 6 years ago

AM doing local development and ive installed via

  npm install vuetable-2 --save-dev

Then went ahead to copy the vuetable file from node_modules/src/components to my project then simply in my app.js

 import Vuetable from './components/common/datatables/Vuetable.vue';  //copied the file here
Vue.component("vuetable", Vuetable);

Then in my component where am using vue2table

                 <vuetable ref="vuetable"
                          api-url="/user-management/users"
                          noDataTemplate = "Currently there are no registered users"
                          :fields="tablecols"
                          :sort-order="sortOrder"
                          :multi-sort="multiSort"
                          table-class="table datatable-show-all"
                          pagination-path=""
                          @vuetable:pagination-data="onPaginationData"
                          detail-row-component="users-expand-row"
                          detail-row-id="id"
                          detail-row-callback="showMore"
                          detail-row-transition="expand"
                >
                    <template slot="expandaction" scope="props">
                        <div class="table-button-container">
                            <button class="moreinfobtn" @click="editRow(props.rowData)"><i class="fa fa-bars"></i>  </button>
                        </div>
                    </template>

                    <template slot="actions" scope="props">
                        <div class="table-button-container">
                            <button class="ui mini teal button" @click="editRow(props.rowData)"><i class="zoom icon"></i>  </button>

                            <button v-tooltip.top-center="'msg'" class="ui mini green  button" @click="editRow(props.rowData)"><i class="fa fa-edit"></i> </button>&nbsp;&nbsp;

                            <button class="ui mini red button" @click="deleteRow(props.rowData)"><i class="fa fa-remove"></i> </button>&nbsp;&nbsp;
                        </div>
                    </template>
                </vuetable>

and the script part

  import UserTableRows from './users-table-rows.js'
 export default {
         computed:{
              tablecols(){
                  return UserTableRows;
                    }
 },

so the UserTableRows

  export default [
 {
    title: 'More <br> info',
     name: '__slot:expandaction',
     dataClass: 'text-center',
 },

{
  name: '__sequence',
  title: '#',
  titleClass: 'text-right',
   dataClass: 'text-right'
 },
  //.. others
     {
         name: '__slot:actions',
         dataClass: 'text-center',
     }

]

What could be wrong since am getting an error The computed property "fields" is already defined as a prop.

ratiw commented 6 years ago

@Geowan This is not the correct repo to post the issue for Vuetable-2.

You probably have other components installed that already defined the fields prop. People have been reporting this problem when they use Vuetable with vee-validate (I think). Please search the issue for the fix.