Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Vue warn]: Unknown custom element: <vuetable-field-sequence> #114

Open
alao115 opened this issue Apr 19, 2019 · 1 comment
Open

[Vue warn]: Unknown custom element: <vuetable-field-sequence> #114

alao115 opened this issue Apr 19, 2019 · 1 comment

Comments

@alao115
Copy link

alao115 commented Apr 19, 2019

Hi everyone....
I need your help please with this stuff:

When i try to use a special field any one between the five fields, I got :
[Vue warn]: Unknown custom element: <vuetable-field-{{the field name here}}> in my console..

Here are the examples:

-[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
-[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
-[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

here is my code:
`


		<vuetable-pagination-info ref="paginationInfoTop"></vuetable-pagination-info>

		<vuetable-pagination ref="paginationTop"
			@vuetable-pagination:change-page="onChangePage"
		></vuetable-pagination>

	</div>

	<vue-table
		ref="vuetable"
 		api-url="https://vuetable.ratiw.net/api/users"
		:per-page="10"
		:fields="field"
		pagination-path=""
		@vuetable:pagination-data="onPaginationData"
		:css="css"
	>
	</vue-table>

	<div class="vuetable-pagination ui basic segment grid">

		<vuetable-pagination-info ref="paginationInfo"></vuetable-pagination-info>

		<vuetable-pagination ref="pagination"
			@vuetable-pagination:change-page="onChangePage"
		></vuetable-pagination>

	</div>

</div>
<script> import Vue from 'vue' import Vuetable from 'vuetable-2' import VuetablePagination from './VuetablePaginationDropdown.vue' import VuetablePaginationInfo from './VuetablePaginationInfo.vue' export default{ data(){ return { field: [ { name: '__handle', title: "#", titleClass: 'text-center', dataClass: 'text-center' }, /* { name: 'id', title: '#', titleClass: 'text-center', dataClass: 'text-center' },*/ { name: 'name', sortField: 'name' }, { name:'email', sortField: 'email' }, { name:'birthdate', sortField: 'birthdate' }, { name:'nickname', titleClass: 'text-center', dataClass: 'text-center', sortField: 'nickname' }, { name: 'salary', titleClass: 'text-center', dataClass: 'text-center', sortField: 'salary' }, { name:'gender', titleClass: 'text-center', dataClass: 'text-center', sortField: 'gender' } ], css: { ascendingIcon: 'icon-up-open', descendingIcon: 'icon-down-open' } } }, components: { vueTable: Vuetable, vuetablePagination: VuetablePagination, vuetablePaginationInfo: VuetablePaginationInfo }, methods: { onPaginationData(paginationData) { this.$refs.paginationTop.setPaginationData(paginationData); this.$refs.paginationInfoTop.setPaginationData(paginationData); this.$refs.pagination.setPaginationData(paginationData); this.$refs.paginationInfo.setPaginationData(paginationData); }, onChangePage(page) { this.$refs.vuetable.changePage(page); } }, } </script>

`

@gabeta
Copy link

gabeta commented Nov 6, 2019

I had the same problem.
The problem was that I had installed the version

npm install vuetable-2 @ next --save

And I was using the old doc instead of the one corresponding to my installed version
https://www.vuetable.com/

For the costomized fields I have to add this object in my fields table
 {  name: 'actions',  title: 'Actions', titleClass: 'text-center',  dataClass: 'text-center', width: '15% ' }
and
<div slot = "actions" slot-scope = "props"> ........ </ Div>
inside the vuetable tag

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants