got error in lesson-11 when rendering the checkbox

[bajian]

i follow the tutorial and set :

{
          name: '__checkbox',   // <----
          titleClass: 'center aligned',
          dataClass: 'center aligned'
        }

got: vue.common.js?c3c9:521[Vue warn]: Error when rendering component at X:\Users\bajian\Desktop\code\vuetable-2-tutorial\node_modules.1.3.0@vuetable-2\src\components\Vuetable.vue: vue.common.js?c3c9:435TypeError: els.forEach is not a function(…)

meanwhile, where is

For more detail on how to access the selected row, see here.

I cannot find anywhere to access the selected

the complete code

<template>
  <div id="app">
  <div class="ui container">
  <div>
        <vuetable ref="vuetable"
    api-url="http://vuetable.ratiw.net/api/users"
    :per-page="20"
    :fields="fields"
    pagination-path=""
    @vuetable:pagination-data="onPaginationData"
    @vuetable-pagination:change-page="onChangePage"
  ></vuetable>
<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>

    </div>

  </div>
</template>

<script>

import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'

export default {
  name: 'app',
  components: {
    Vuetable,
    VuetablePagination,
    VuetablePaginationInfo
  },
  data(){
    return {
      fields: [
{
          name: '__checkbox',   // <----
          titleClass: 'center aligned',
          dataClass: 'center aligned'
        },
        'name', 'email',
        {
          name: 'age',
          sortField: 'birthdate',//AGE IS COMPUTED BY birthdate
          dataClass: 'center aligned'
        },
        {
          name: 'birthdate',
          titleClass: 'center aligned',
          dataClass: 'center aligned',
          visible: false
        },
        {
          name: 'nickname',
          callback: 'allcap'
        },
        {
          name: 'gender',
          titleClass: 'center aligned',
          dataClass: 'center aligned',
          callback: 'genderLabel'
        },
        {
          name: 'salary',
          titleClass: 'center aligned',
          dataClass: 'right aligned',
          sortField: 'salary'
        }
      ]
    }
  },
  methods: {
    allcap (value) {
      return value.toUpperCase()
    },
    genderLabel (value) {
      return value === 'M'
        ? '<span class="ui teal label"><i class="large man icon"></i>Male</span>'
        : '<span class="ui pink label"><i class="large woman icon"></i>Female</span>'
    },
    onPaginationData (paginationData) {
      this.$refs.pagination.setPaginationData(paginationData)
      this.$refs.paginationInfo.setPaginationData(paginationData)
      console.log('onPaginationData',paginationData);
    },
    onChangePage (page) {
      this.$refs.vuetable.changePage(page)
      console.log('onChangePage',page);
    }
  }
}
</script>

[ratiw]

@bajian Many thanks. Will check it when I have enough time.

[ratiw]

@bajian I've just look at your PR, but I cannot reproduce your error. The code is still working as expected.

[bajian]

@ratiw maybe the api document.querySelectorAll is incompatible with all the browser as： document.querySelectorAll Returns a NodeList representing a list of elements with the current element as root that matches the specified group of selectors.

Although NodeList is not an Array, it is possible to iterate on it using forEach(). Several older browsers have not implemented this method yet.

reference： https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll https://developer.mozilla.org/en-US/docs/Web/API/NodeList http://stackoverflow.com/questions/41054259/how-can-i-make-queryselectorall-or-foreach-work-in-firefox

[ratiw]

What browser do you use that causes this error?

[bajian]

I am a Chinese,so I use the 360极速浏览器.... http://chrome.360.cn/ it is a browser with webkit...like chrome I have not tried the code in other browser yet

[bajian]

@ratiw I have tried it in Microsoft Edge 38.14393.0.0 in WIN10,and got the same error

[dukadin]

@ratiw can you please check this broken link on here?

For more detail on how to access the selected row, see here.

I'm trying to find how to access the selected row(s).

[ratiw]

@dukadin Sorry, it is intended to be linked to the documentation, but I'm not able to work on it yet.

You can open a new issue for your problem. If it doesn't take too much time, I'll try to help or guide you through it.