When using an element of iteration within the loop as an indexer, the iteration variable gets incorrectly generated as an access off of _vm.
In the example below, the particular issue is all occurrences of _vm.actionKey, which should just be actionKey. $$i and $$a also get incorrectly transformed into accesses off of _vm.
Current behavior
With vue-template-babel-compiler 1.0.4:
var render = function() {
var _vm = this
var _h = _vm.$createElement
var _c = _vm._self._c || _h
return _c(
"div",
_vm._l(_vm.actionKeys, function(actionKey) {
return _c("div", [
_c("input", {
directives: [
{
name: "model",
rawName: "v-model",
value: _vm.enabled[actionKey],
expression: "enabled[actionKey]"
}
],
attrs: {
type: "checkbox"
},
domProps: {
checked: Array.isArray(_vm.enabled[actionKey])
? _vm._i(_vm.enabled[actionKey], null) > -1
: _vm.enabled[actionKey]
},
on: {
change: function change($event) {
var $$a = _vm.enabled[actionKey],
$$el = $event.target,
$$c = $$el.checked ? true : false
if (Array.isArray($$a)) {
var $$v = null,
$$i = _vm._i($$a, $$v)
if ($$el.checked) {
_vm.$$i < 0 &&
_vm.$set(
_vm.enabled,
_vm.actionKey,
_vm.$$a.concat([_vm.$$v])
)
} else {
_vm.$$i > -1 &&
_vm.$set(
_vm.enabled,
_vm.actionKey,
_vm.$$a
.slice(0, _vm.$$i)
.concat(_vm.$$a.slice(_vm.$$i + 1))
)
}
} else {
_vm.$set(_vm.enabled, _vm.actionKey, $$c)
}
}
}
})
])
}),
0
)
}Expected behavior
With vue-template-compiler 2.6.11:
function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c(
'div',
_vm._l(_vm.actionKeys, function (actionKey) {
return _c('div', [
_c('input', {
directives: [
{
name: 'model',
rawName: 'v-model',
value: _vm.enabled[actionKey],
expression: 'enabled[actionKey]',
},
],
attrs: {
type: 'checkbox',
},
domProps: {
checked: Array.isArray(_vm.enabled[actionKey])
? _vm._i(_vm.enabled[actionKey], null) > -1
: _vm.enabled[actionKey],
},
on: {
change: function ($event) {
var $$a = _vm.enabled[actionKey],
$$el = $event.target,
$$c = $$el.checked ? true : false;
if (Array.isArray($$a)) {
var $$v = null,
$$i = _vm._i($$a, $$v);
if ($$el.checked) {
$$i < 0 &&
_vm.$set(_vm.enabled, actionKey, $$a.concat([$$v]));
} else {
$$i > -1 &&
_vm.$set(
_vm.enabled,
actionKey,
$$a.slice(0, $$i).concat($$a.slice($$i + 1))
);
}
} else {
_vm.$set(_vm.enabled, actionKey, $$c);
}
},
},
}),
]);
}),
0
);
}Diff between the two:
diff --git "a/.\\stock.js" "b/.\\babel.js"
index 9a9e5b8..5d4fc7b 100644
--- "a/.\\stock.js"
+++ "b/.\\babel.js"
@@ -2,6 +2,7 @@ var render = function () {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
+
return _c(
'div',
_vm._l(_vm.actionKeys, function (actionKey) {
@@ -15,33 +16,43 @@ var render = function () {
expression: 'enabled[actionKey]',
},
],
- attrs: { type: 'checkbox' },
+ attrs: {
+ type: 'checkbox',
+ },
domProps: {
checked: Array.isArray(_vm.enabled[actionKey])
? _vm._i(_vm.enabled[actionKey], null) > -1
: _vm.enabled[actionKey],
},
on: {
- change: function ($event) {
+ change: function change($event) {
var $$a = _vm.enabled[actionKey],
$$el = $event.target,
$$c = $$el.checked ? true : false;
+
if (Array.isArray($$a)) {
var $$v = null,
$$i = _vm._i($$a, $$v);
+
if ($$el.checked) {
- $$i < 0 &&
- _vm.$set(_vm.enabled, actionKey, $$a.concat([$$v]));
+ _vm.$$i < 0 &&
+ _vm.$set(
+ _vm.enabled,
+ _vm.actionKey,
+ _vm.$$a.concat([_vm.$$v])
+ );
} else {
- $$i > -1 &&
+ _vm.$$i > -1 &&
_vm.$set(
_vm.enabled,
- actionKey,
- $$a.slice(0, $$i).concat($$a.slice($$i + 1))
+ _vm.actionKey,
+ _vm.$$a
+ .slice(0, _vm.$$i)
+ .concat(_vm.$$a.slice(_vm.$$i + 1))
);
}
} else {
- _vm.$set(_vm.enabled, actionKey, $$c);
+ _vm.$set(_vm.enabled, _vm.actionKey, $$c);
}
},
},Usage
<template>
<div>
<div v-for="actionKey in actionKeys">
<input type="checkbox" v-model="enabled[actionKey]" />
</div>
</div>
</template>Extra
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent