vuejs / vue-template-es2015-compiler

Support a subset of handy ES2015 features in Vue 2.0 templates.
61 stars 23 forks source link

Cannot use object destructuring with custom variables in v-for #6

Closed preaction closed 7 years ago

preaction commented 7 years ago

When I try to use ES2015 object destructuring with custom variable names (to map the data property to the player value), I get the following error message:

ERROR in ./~/vue-loader/lib/template-compiler?{"id":"data-v-6489d922"}!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/player-list.vue
Module parse failed: /Users/doug/app/gameday/node_modules/vue-loader/lib/template-compiler/index.js?{"id":"data-v-6489d922"}!/Users/doug/app/gameday/node_modules/vue-loader/lib/selector.js?type=template&index=0!/Users/doug/app/gameday/src/components/player-list.vue Unexpected token (24:11)
You may need an appropriate loader to handle this file type.
|     }
|   }, [_vm._v("Last Seen")]), _vm._v(" "), _c('th')])]), _vm._v(" "), _c('tbody', [_vm._l((_vm.sorted(_vm.players)), function(ref) {
|     var _vm.player = ref.data;
|     var index = ref.index;
|
 @ ./src/components/player-list.vue 9:2-184
 @ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
 @ ./src/App.vue
 @ ./src/main.js

The template I'm using is:

<template v-for="{ data: player, index } in sorted( players )">
  <tr>
    <td>{{ index }}</td>
    <td>{{ player.name }}</td>
    <td>{{ player.dci }}</td>
  </tr>
</template>

The sorted method returns an array of objects like { data: <object>, index: <int> }, and I want to map the data field into a descriptive name (since it's a Player object).

This syntax seems to work fine without vue-loader: http://jsfiddle.net/0ynef4b4/2/

yyx990803 commented 7 years ago

Released in 1.5.2.

preaction commented 7 years ago

Thanks for the quick turnaround!