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).
When I try to use ES2015 object destructuring with custom variable names (to map the
data
property to theplayer
value), I get the following error message:The template I'm using is:
The
sorted
method returns an array of objects like{ data: <object>, index: <int> }
, and I want to map thedata
field into a descriptive name (since it's aPlayer
object).This syntax seems to work fine without vue-loader: http://jsfiddle.net/0ynef4b4/2/