diff --git a/src/generators/dom/visitors/Component/Binding.ts b/src/generators/dom/visitors/Component/Binding.ts index cd10709238..26d853242a 100644 --- a/src/generators/dom/visitors/Component/Binding.ts +++ b/src/generators/dom/visitors/Component/Binding.ts @@ -54,7 +54,8 @@ export default function visitBinding( block, name, snippet, - context: '_context', + _this: 'this', + props: '_context', attribute, dependencies, value: 'value', diff --git a/src/generators/dom/visitors/Element/Binding.ts b/src/generators/dom/visitors/Element/Binding.ts index d2acbdd583..37482f1986 100644 --- a/src/generators/dom/visitors/Element/Binding.ts +++ b/src/generators/dom/visitors/Element/Binding.ts @@ -53,7 +53,8 @@ export default function visitBinding( block, name, snippet, - context: '_svelte', + _this: state.parentNode, + props: '_svelte', attribute, dependencies, value, diff --git a/src/generators/dom/visitors/Element/EventHandler.ts b/src/generators/dom/visitors/Element/EventHandler.ts index 64178f5499..b66f6b8c3d 100644 --- a/src/generators/dom/visitors/Element/EventHandler.ts +++ b/src/generators/dom/visitors/Element/EventHandler.ts @@ -64,7 +64,7 @@ export default function visitEventHandler( // create the handler body const handlerBody = deindent` ${state.usesComponent && - `var ${block.alias('component')} = this._svelte.component;`} + `var ${block.alias('component')} = ${_this}._svelte.component;`} ${declarations} [✂${attribute.expression.start}-${attribute.expression.end}✂]; `; diff --git a/src/generators/dom/visitors/shared/binding/getSetter.ts b/src/generators/dom/visitors/shared/binding/getSetter.ts index 5657ab9ef5..784e1d7302 100644 --- a/src/generators/dom/visitors/shared/binding/getSetter.ts +++ b/src/generators/dom/visitors/shared/binding/getSetter.ts @@ -6,7 +6,8 @@ export default function getSetter({ block, name, snippet, - context, + _this, + props, attribute, dependencies, value, @@ -20,8 +21,8 @@ export default function getSetter({ const computed = isComputed(attribute.value); return deindent` - var list = this.${context}.${block.listNames.get(name)}; - var index = this.${context}.${block.indexNames.get(name)}; + var list = ${_this}.${props}.${block.listNames.get(name)}; + var index = ${_this}.${props}.${block.indexNames.get(name)}; ${computed && `var state = #component.get();`} list[index]${tail} = ${value}; diff --git a/test/runtime/samples/binding-select-in-each-block/_config.js b/test/runtime/samples/binding-select-in-each-block/_config.js new file mode 100644 index 0000000000..5a333501bb --- /dev/null +++ b/test/runtime/samples/binding-select-in-each-block/_config.js @@ -0,0 +1,32 @@ +export default { + skip: true, // JSDOM... + + html: ` + + + + `, + + data: { + items: [{ value: 'hullo' }, { value: 'world' }] + }, + + test(assert, component, target, window) { + const selects = [...target.querySelectorAll('select')]; + + const change = new window.Event('change'); + + selects[1].options[0].selected = true; + selects[1].dispatchEvent(change); + + assert.deepEqual(component.get('items'), [ + { value: 'hullo' }, { value: 'hullo' } + ]); + } +}; diff --git a/test/runtime/samples/binding-select-in-each-block/main.html b/test/runtime/samples/binding-select-in-each-block/main.html new file mode 100644 index 0000000000..f61ee5b2ca --- /dev/null +++ b/test/runtime/samples/binding-select-in-each-block/main.html @@ -0,0 +1,6 @@ +{{#each items as item}} + +{{/each}} \ No newline at end of file