Vuetable-2: fields prop breakes down after changing page

[RidgeA]

Hello! I have faced with a strange problem.
I use vuetable2 (with pagination) and Laravel 5.3.

During an initial loading everything is well. But when I try to change page - table rendering fails.
It happens because this.field prop breaks down.
In loadData method before calling Vue.http.get there are 2 objects in property, but in the first row of loadSuccess method - it consists of 2 strings (as defined in directive)

components defining:

                    <template>
                        <vuetable ref="vuetable"
                                  api-url="/oauth/clients/tokens"
                                  :fields="['user_id', 'client_id']"
                                  pagination-path=""
                                  @vuetable:pagination-data="onPaginationData">
                        </vuetable>
                        <div class="text-center">
                            <vuetable-pagination
                                    ref="pagination"
                                    :css="cssPagination"
                                    :icons="icons"
                                    @vuetable-pagination:change-page="onChangePage">
                            </vuetable-pagination>
                        </div>
                    </template>

        methods: {
            onPaginationData (paginationData) {
                this.$refs.pagination.setPaginationData(paginationData)
            },
            onChangePage (page) {
                this.$refs.vuetable.changePage(page)
            }
        }

Vuetable.vue:

    loadData: function(success = this.loadSuccess, failed = this.loadFailed) {
      this.fireEvent('loading')

      this.httpOptions['params'] = this.getAllQueryParams()
        console.log(JSON.stringify(this.fields));
/**
output: "[{"name":"user_id","title":"User_id","titleClass":"","dataClass":"","callback":null,"visible":true},{"name":"client_id","title":"Client_id","titleClass":"","dataClass":"","callback":null,"visible":true}]"
*/
      Vue.http.get(this.apiUrl, this.httpOptions).then(
        success,
        failed
      )
    },

    loadSuccess: function(response) {
        console.log(JSON.stringify(this.fields));
/**
output: "["user_id","client_id"]"
*/
        this.fireEvent('load-success', response)
...

[ratiw]

@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?

[RidgeA]

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.

[ratiw]

@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.

[RidgeA]

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>

[ratiw]

@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' ]
    }
  }

[RidgeA]

@ratiw Yes, it works, thank you.

Nevertheless, I think, it is a bug.

[ratiw]

@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.

[RidgeA]

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.

[ratiw]

@RidgeA That's interesting. I'll check it out to see what would be the cause of that. Thanks.

[ratiw]

@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.

[RidgeA]

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?

[ratiw]

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.

[RidgeA]

Thank you!

[lmj0011]

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

[ratiw]

@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.

[lmj0011]

@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>