diff --git a/src/generators/dom/visitors/Component/Binding.js b/src/generators/dom/visitors/Component/Binding.js index 7ad2e61cb2..12bf41cbf0 100644 --- a/src/generators/dom/visitors/Component/Binding.js +++ b/src/generators/dom/visitors/Component/Binding.js @@ -3,7 +3,7 @@ import flattenReference from '../../../../utils/flattenReference.js'; import getSetter from '../shared/binding/getSetter.js'; export default function visitBinding ( generator, block, state, node, attribute, local ) { - const { name, keypath } = flattenReference( attribute.value ); + const { name } = flattenReference( attribute.value ); const { snippet, contexts, dependencies } = block.contextualise( attribute.value ); if ( dependencies.length > 1 ) throw new Error( 'An unexpected situation arose. Please raise an issue at https://github.com/sveltejs/svelte/issues — thanks!' ); @@ -35,7 +35,7 @@ export default function visitBinding ( generator, block, state, node, attribute, prop }); - const setter = getSetter({ block, name, keypath, context: '_context', attribute, dependencies, value: 'value' }); + const setter = getSetter({ block, name, context: '_context', attribute, dependencies, value: 'value' }); generator.hasComplexBindings = true; diff --git a/src/generators/dom/visitors/Element/Binding.js b/src/generators/dom/visitors/Element/Binding.js index e88fe8df43..8771fe05e6 100644 --- a/src/generators/dom/visitors/Element/Binding.js +++ b/src/generators/dom/visitors/Element/Binding.js @@ -20,7 +20,7 @@ export default function visitBinding ( generator, block, state, node, attribute const bindingGroup = attribute.name === 'group' ? getBindingGroup( generator, keypath ) : null; const value = getBindingValue( generator, block, state, node, attribute, isMultipleSelect, bindingGroup, type ); - let setter = getSetter({ block, name, keypath, context: '_svelte', attribute, dependencies, value }); + let setter = getSetter({ block, name, context: '_svelte', attribute, dependencies, value }); let updateElement = `${state.parentNode}.${attribute.name} = ${snippet};`; const lock = block.getUniqueName( `${state.parentNode}_${attribute.name}_updating` ); let updateCondition = `!${lock}`; diff --git a/src/generators/dom/visitors/shared/binding/getSetter.js b/src/generators/dom/visitors/shared/binding/getSetter.js index 852ea83fa7..14c3799280 100644 --- a/src/generators/dom/visitors/shared/binding/getSetter.js +++ b/src/generators/dom/visitors/shared/binding/getSetter.js @@ -1,9 +1,10 @@ import deindent from '../../../../../utils/deindent.js'; -export default function getSetter ({ block, name, keypath, context, attribute, dependencies, value }) { +export default function getSetter ({ block, name, context, attribute, dependencies, value }) { + const tail = attribute.value.type === 'MemberExpression' ? getTailSnippet( attribute.value ) : ''; + if ( block.contexts.has( name ) ) { const prop = dependencies[0]; - const tail = attribute.value.type === 'MemberExpression' ? getTailSnippet( attribute.value ) : ''; return deindent` var list = this.${context}.${block.listNames.get( name )}; @@ -15,10 +16,12 @@ export default function getSetter ({ block, name, keypath, context, attribute, d } if ( attribute.value.type === 'MemberExpression' ) { + const alias = block.alias( name ); + return deindent` - var ${name} = ${block.component}.get( '${name}' ); - ${keypath} = ${value}; - ${block.component}._set({ ${name}: ${name} }); + var ${alias} = ${block.component}.get( '${name}' ); + ${alias}${tail} = ${value}; + ${block.component}._set({ ${name}: ${alias} }); `; } diff --git a/test/runtime/samples/binding-input-text-deconflicted/_config.js b/test/runtime/samples/binding-input-text-deconflicted/_config.js new file mode 100644 index 0000000000..49007dc883 --- /dev/null +++ b/test/runtime/samples/binding-input-text-deconflicted/_config.js @@ -0,0 +1,35 @@ +export default { + data: { + component: { + name: 'world' + } + }, + + html: ` +