Back

Vuejs Vuetable-2 error.


omaromp2 posted 10 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 10 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 10 months ago

I did, got a weird reference error. ErrorImage

Thank you for the reply

ratiw replied 10 months ago

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

omaromp2 replied 10 months ago

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

ratiw replied 10 months ago Solution

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

Joshua Wallace replied 5 months ago

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

omaromp2 replied 4 months ago

Joshua sorry for the delay! As @ratiw pointed out, it was a config error. Have you tried any of the latest examples?

vuetable-2

Hope this helps!


Sign in to participate in this thread!


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