Back

Vuejs Vuetable-2 error.


omaromp2 posted 5 months ago

Hi I'm following a tutorial tutorial

But I keep getting the same error: TypeError: this.$refs.pagination.setPaginationData is not a function

here is my component:

<template>
<div>
	<vuetable ref="vuetable" class="table table-hover"
	    api-url="http://localhost:8000/myjobqueueData"
	    :fields="fields"
	    pagination-path=""
	     @vuetable:pagination-data="onPaginationData"></vuetable>
	<vuetable-pagination ref="pagination"
	@vuetable-pagination:change-page="onChangePage"></vuetable-pagination>
</div>
</template>

<script>
import Vuetable from 'vuetable-2'
import VuetablePagination from 'vuetable-2'


export default {

  name: 'personjobqueue',

  components:{
  	Vuetable,
  	VuetablePagination
  },

  data () {
    return {
    	fields:[ 
    	{
    		name:'Autho_Seq', 
    		title: 'Sec', 
    	}, 
    	{
    		name: 'Assigned_To_Date', 
    		title: 'Assigned on'
    	}, 
    	{
    		name: 'Referral_By', 
    		title: 'Refered By'
    	}, 
    	{
    		name: 'File_Name', 
    		title: 'Doc. Name'
    	}, 
    	{
    		name: 'Document_Type', 
    		title: 'Format',
    		callback: 'docType'
    	}, 
    	{
    		name: 'Authorization_Status', 
    		title: 'Status', 
    		callback:'status'
    	}
    	]
    };
  }, 

  methods:{
  	docType(value){
  		
  		if (value === 'F') {
  			return ' <i class="fa fa-fax" aria-hidden="true"></i> Fax'
  		} else {
  			return '<i class="fa fa-file-excel-o" aria-hidden="true"></i> Excel '
  		}
  	}, 
  	status(value){
  		if (value == 1) {
  			return '<i class="fa fa-check-circle" aria-hidden="true" style="color:green;" ></i> Done'
  		}else if(value == 0){
  			return '<i class="fa fa-circle-o" aria-hidden="true" style="color:orange;" ></i> In Process'
  		}else{
  			return '<i class="fa fa-circle-o" aria-hidden="true" style="color:red;" ></i> Not Started '
  		}
  	}, 
  	onPaginationData (paginationData) {
      	this.$refs.pagination.setPaginationData(paginationData)
    },
    onChangePage (page) {
      	this.$refs.vuetable.changePage(page)
    }
  }

};
</script>

Thanks in advance

ratiw replied 5 months ago

Looks like the import statement is incorrect. Try this


//...
import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
//..
omaromp2 replied 5 months ago

I did, got a weird reference error. ErrorImage

Thank you for the reply

ratiw replied 5 months ago

@omaromp2 Check this out, it might have solve your problem.

omaromp2 replied 5 months ago

Still the error, a little stuck here. Does it have something to do with laravel mix?

ratiw replied 5 months ago

Base from the error message, looks like there is something wrong with the configuration.

Joshua Wallace replied 1 week ago

@omaromp2 I am getting the exact same error. Did you ever resolve the issue?


Sign in to participate in this thread!



We'd like to thank these amazing companies for supporting us