Vue.js && Shopware 6 是否有可能通过@input传递目标元素？

Question

我正在尝试构建一个具有多个文本字段的自定义 cms 元素。

因此我修改了 cms-text 元素的代码并对其进行了自定义。

每当我想更改一个文本字段的值时，所有其他值也会发生变化。

是否有可能通过@input/@blur传递目标？

所有元素都很相似，如下所示:

<sw-text-editor
                            v-model="element.config.information.value"
                            :allow-inline-data-mapping="true"
                            sanitize-input
                            @input="onInput"
                            @blur="onBlur"
                        />

vue:

onBlur(content) {
            this.emitChanges(content);
        },

        onInput(content) {
            this.emitChanges(content);
        },

        emitChanges(content) {
            if (content !== this.element.config.productName.value && this.element.config.productName.source !== 'mapped') {
                this.element.config.productName.value = content;
                this.$emit('element-update', this.element);
                console.log(this.element)
            }

            if(content !== this.element.config.subtitle.value && this.element.config.subtitle.source !== 'mapped'){
                this.element.config.subtitle.value = content;
                this.$emit('element-update', this.element);
                return;
            }

            if(content !== this.element.config.information.value && this.element.config.information.source !== 'mapped'){
                this.element.config.information.value = content;
                this.$emit('element-update', this.element);
            }
        },

Answer 1

您可以在内联事件处理程序中使用 $event 传递原始事件，并以这种方式传递更多变量，例如属性名称。

<sw-text-editor
    v-model="element.config.information.value"
    :allow-inline-data-mapping="true"
    sanitize-input
    @input="onChange('information', $event)"
    @blur="onChange('information', $event)"
/>
<sw-text-editor
    v-model="element.config.productName.value"
    :allow-inline-data-mapping="true"
    sanitize-input
    @input="onChange('productName', $event)"
    @blur="onChange('productName', $event)"
/>

onChange(propertyName, content) {
    if (content !== this.element.config[propertyName].value && this.element.config[propertyName].source !== 'mapped') {
        this.element.config[propertyName].value = content;
        this.$emit('element-update', this.element);
    }
}