Error compiling template!!!! HELP ME!!!

[ericksongmr]

ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-160b6001","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vuetable/src/components/VuetablePaginationDropdown.vue
(Emitted value instead of an instance of Error)
  Error compiling template:

  <div class="{{wrapperClass}}">
      <a @click="loadPage('prev')"
           class="{{linkClass}} {{i....................

ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-9f9f1f60","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vuetable/src/components/VuetablePagination.vue
(Emitted value instead of an instance of Error)
  Error compiling template:

  <div class="{{wrapperClass}}">
      <a @click="loadPage(1)"
          class="btn-nav {{li..............................

ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-aa2661d4","hasScoped":false,"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0!./node_modules/vuetable/src/components/Vuetable.vue
(Emitted value instead of an instance of Error)
  Error compiling template:

  <div class="{{wrapperClass}}">
      <table class="vuetable {{tableClass}}">
          <thead>
              <tr>............................

 - class="{{wrapperClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="vuetable {{tableClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{ sortIcon(field) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{field.titleClass || ''}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - id="{{field.name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
  - class="{{field.titleClass || ''}} {{isSortable(field) ? 'sortable' : ''}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - id="_{{field.name}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div id="{{ val }}">, use <div :id="val">.
  - class="{{ sortIcon(field) }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="vuetable-sequence {{field.dataClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="vuetable-checkboxes {{field.dataClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="vuetable-actions {{field.dataClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{ action.class }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{ action.icon }}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{field.dataClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{field.dataClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="{{field.dataClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="vuetable-pagination {{paginationClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="vuetable-pagination-info {{paginationInfoClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.
  - class="vuetable-pagination-component {{paginationComponentClass}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of <div class="{{ val }}">, use <div :class="val">.

 @ ./node_modules/vuetable/src/components/Vuetable.vue 10:23-232
 @ ./node_modules/babel-loader/lib?{"cacheDirectory":true,"presets":[["env",{"modules":false,"targets":{"browsers":["> 2%"],"uglify":true}}]],"plugins":["transform-object-rest-spread",["transform-runtime",{"polyfill":false,"helpers":false}]]}!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./resources/assets/js/components/VueTable.vue
 @ ./resources/assets/js/components/VueTable.vue
 @ ./resources/assets/js/routes.js
 @ ./resources/assets/js/app.js
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\LEBLANC-PC\AppData\Roaming\npm-cache\_logs\2018-02-23T06_32_03_184Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\LEBLANC-PC\AppData\Roaming\npm-cache\_logs\2018-02-23T06_32_03_408Z-debug.log

## How can I solve it?

[ratiw]

It's likely that there's something wrong with your webpack config, especially the vue-loader part. Sorry, I'm not an expert on that.

[mostafa6765]

facing the same issue . how can solve this @ratiw

[mostafa6765]

@ratiw mate use v-bind:class instead of {{interpolation}}.

https://github.com/vuejs/vue/issues/2812

[ratiw]

Then, you're using wrong version of Vue for this vue-table repo. Please read the README.

[ericksongmr]

Hi, sorry, I had not noticed that there is another version of vuetable for vue 2, I'm from Peru and I do not know very well English and I had not read it in the documentation. Indeed the problem is that I had downloaded this version in vue 2 and that's why it did not work, but I downloaded vuetable-2 and it works perfectly. Thank you

[ratiw]

Ok, then I'm gonna close the issue.