Fixes shorthand class directives which do not have classes

Fixes #1739
pull/1749/head
Jacob Wright 6 years ago
parent 0d10d6cc2d
commit 51a3972ad5

@ -1326,7 +1326,7 @@ export default class Element extends Node {
dependencies = expression.dependencies; dependencies = expression.dependencies;
} else { } else {
snippet = `ctx${quotePropIfNecessary(name)}`; snippet = `ctx${quotePropIfNecessary(name)}`;
dependencies = [name]; dependencies = new Set([name]);
} }
const updater = `@toggleClass(${this.var}, "${name}", ${snippet});`; const updater = `@toggleClass(${this.var}, "${name}", ${snippet});`;

@ -0,0 +1,16 @@
export default {
data: {
"is-active": true,
isSelected: true,
myClass: 'one two'
},
html: `<div class="one two is-active isSelected"></div>`,
test ( assert, component, target, window ) {
component.set({ "is-active": false });
assert.htmlEqual( target.innerHTML, `
<div class="one two isSelected"></div>
` );
}
};

@ -0,0 +1 @@
<div class="{ myClass }" class:is-active class:isSelected class:not-used></div>

@ -1,16 +1,15 @@
export default { export default {
data: { data: {
"is-active": true, "is-active": true,
isSelected: true, isSelected: true
myClass: 'one two'
}, },
html: `<div class="one two is-active isSelected"></div>`, html: `<div class="is-active isSelected"></div>`,
test ( assert, component, target, window ) { test ( assert, component, target, window ) {
component.set({ "is-active": false }); component.set({ "is-active": false });
assert.htmlEqual( target.innerHTML, ` assert.htmlEqual( target.innerHTML, `
<div class="one two isSelected"></div> <div class="isSelected"></div>
` ); ` );
} }
}; };

@ -1 +1 @@
<div class="{ myClass }" class:is-active class:isSelected class:not-used></div> <div class:is-active class:isSelected class:not-used></div>

Loading…
Cancel
Save