Comments (16)
@RidgeA Try moving the array out into its own object, like so
<vuetable ref="vuetable"
api-url="/oauth/clients/tokens"
:fields='columns'
pagination-path=""
@vuetable:pagination-data="onPaginationData">
</vuetable>
data () {
return {
columns: [ 'user_id', 'client_id' ]
}
}
from vuetable-2.
@RidgeA Sorry, I don't understand what you mean by "the fields
prop breaks down"? What does it look like when the table rendering failed? What is the error message that you see on the browser console or the HTTP returned status?
from vuetable-2.
What does it look like when the table rendering failed?
It looks like there are not data in table
I have no error in browser.
The reason why there are no data in the table in broken fields
prop
This is a part of template from vuetable.vue
<template v-for="(item, index) in tableData">
<tr @dblclick="onRowDoubleClicked(item, $event)" @click="onRowClicked(item, $event)" :render="onRowChanged(item)" :class="onRowClass(item, index)">
<template v-for="field in fields"> <--------------------------------- (1)
<template v-if="field.visible"> <--------------------------------- (2)
<template v-for="field in fields">
iterate over data in fields
property.
First time after component creating in field property stored an array of objects (after processing :fields="['user_id', 'client_id']"
from my code by normalizeFields
method in vuetable component), so the field
has property field.visible
.
But, after changing page, due to some reasons, the field
property in vuetable component changes to array of strings (in the form as I have specified in my code - ['user_id', 'client_id']
) , that, of course, doesn't have visible
property and v-if
(2) goes to else
branch.
from vuetable-2.
@RidgeA I really doubt that it was caused by the Vuetable code as everything is working well on my side and all the sample code still work as expected.
However, I would suspect the problem from the API side. Could you please check the return status of the API endpoint when you request for the second page?
If you are using some kind of stateless authentication (e.g. the oauth in the api-url), please also make sure the you send appropriate token to the API backend. The only way to know for sure about this is to inspect the HTTP request/response.
from vuetable-2.
I have checked this. API works properly and returns data in expected format and with 200 status code.
And saves into this.tableData
in vuetable component.
Pagination works properly only if I specify fields
prop in full format:
<vuetable ref="vuetable"
api-url="/oauth/clients/tokens"
:fields='[{"name":"user_id","title":"User_id","titleClass":"","dataClass":"","callback":"","visible":true},{"name":"client_id","title":"Client_id","titleClass":"","dataClass":"","callback":"","visible":true}]'
pagination-path=""
@vuetable:pagination-data="onPaginationData">
</vuetable>
from vuetable-2.
@ratiw Yes, it works, thank you.
Nevertheless, I think, it is a bug.
from vuetable-2.
@RidgeA No, I don't think so. If you look at my tutorial code here, you'll see that it is working as it should.
The only different that I can see in your case is that you use "
and '
in the opposite way as I did. But I'm not 100% sure whether it's the template parsing of Vue or something else.
from vuetable-2.
If you look at my tutorial code here
Because there are no pagination.
In lesson 7 of your tutorial (first lesson with pagination) try to change
:fields="fields"
to
:fields="['email', 'birthdate', 'nickname', 'gender', 'salary']"
and after loading change table page.
from vuetable-2.
@RidgeA That's interesting. I'll check it out to see what would be the cause of that. Thanks.
from vuetable-2.
@RidgeA The cause of the problem is the use of fields
prop that should not be mutated. This problem does not occur when assigning an array object to fields
prop as Vue does not detect the change inside the object passed in through prop. But when assigning an array
directly to fields
prop, the code in normalizeFields
method behaves incorrectly as Vue.set
does not work as expect in this situation.
A fix has already been implemented but may not be available until the next batch of update, so, in the meantime, please use the "array object" variable instead of array literal when setting fields
prop.
from vuetable-2.
Thanks a lot!
A fix has already been implemented
Just to make it clear - is this fix in vue or in vuetable? In order to know which updates to wait.
May be you can give a link to commit with this fix?
from vuetable-2.
It's a fix in vuetable. I haven't push the update yet as I'm waiting to finish another feature I'm working on.
from vuetable-2.
Thank you!
from vuetable-2.
The cause of the problem is the use of fields prop that should not be mutated. This problem does not occur when assigning an array object to fields prop as Vue does not detect the change inside the object passed in through prop. But when assigning an array directly to fields prop, the code in normalizeFields method behaves incorrectly as Vue.set does not work as expect in this situation.
A fix has already been implemented but may not be available until the next batch of update, so, in the meantime, please use the "array object" variable instead of array literal when setting fields prop.
@ratiw
What release is this targeted for? I'm having this problem also
Anyone following the tutorial vebatium for vue-table2 will get stuck here:
https://github.com/ratiw/vuetable-2-tutorial/blob/master/doc/lesson-04.md
from vuetable-2.
@lmj0011 Hopefully soon. I just can't find enough time to finish it at the moment. But if you could just move the fields definition into an object, it should fix the problem at the moment.
from vuetable-2.
@ratiw thanks for the fast reply.
disregard my previous comment
I had to restart my app, "hot-module-reload" is always messing up
things are working like so
<template>
<vuetable ref="vuetable"
api-url="http://vuetable.ratiw.net/api/users"
:fields="columns"
></vuetable>
</template>
<script>
import Vuetable from 'vuetable-2/src/components/Vuetable'
export default {
data () {
return {
'columns': [
'name', 'email', 'birthdate',
{
name: 'address.line1',
title: 'Address 1'
},
{
name: 'address.line2',
title: 'Address 2'
},
{
name: 'address.zipcode',
title: 'Zipcode'
}
]
}
},
components: {
Vuetable
}
}
</script>
from vuetable-2.
Related Issues (20)
- Please update axios version dependencies
- Vuetble-2 Pagination not working from page-2
- crypt online
- VuetableFieldCheckbox not found on library
- Sorting without API that supports sorting HOT 1
- Vuetable-2 Master Detail View
- No rowdata are available in data-item on checkbox-toggled method.
- How to disable checkboxes in vuetable in vue js.
- detail-row-component, data structure from @vuetable:cell-clicked event is changed?
- Add a possibility to remove sort for a field
- "formatter" not "format" in https://ratiw.github.io/vuetable-2/#/Callbacks
- Feature Request: Close other open details on open - like acrodion
- initial-page not working
- HOW UPDATE TABLE WITH dataManager
- The project is alive? HOT 2
- did this project die?
- calling api in component field error with pagination
- Multiple sort column field
- Prev and Next Buttons
- How to show image in vue-table in columns
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuetable-2.