Shopware中Vue.js自定义滑块组件双向绑定失效问题

问题根源 #

Vue的v-model默认通过value prop和input事件实现双向绑定，你的组件当前触发的是change事件，不符合v-model的默认约定，导致绑定变量接收到错误的事件对象。

解决方案 #

1. 修改事件触发逻辑

将组件onChange方法中触发的事件从change改为input，匹配v-model默认监听的事件：

methods: {
    onChange(event) {
        this.$emit('input', event.target.value);
    },
}

• 若需要滑块松开时才更新值，保持模板中的@change="onChange"即可；
• 若需要实时更新，可将模板中的@change="onChange"改为@input="onChange"。

2. 恢复watch的正确写法

之前修改的watch逻辑错误，value是父组件传递的prop值（并非事件对象），恢复为初始写法：

watch: {
    value(value) {
        this.currentValue = value;
    }
},

3. 处理监听冲突

在additionalListeners计算属性中移除input监听，避免和组件内部的事件逻辑冲突：

additionalListeners() {
    const additionalListeners = Object.assign({}, this.$listeners);
    delete additionalListeners.change;
    delete additionalListeners.input;
    return additionalListeners;
},

修改后的完整index.js代码 #

const { Component } = Shopware;
import template from './range-slider.html.twig';

Shopware.Component.register('range-slider', {
    template: template,
    inheritAttrs: false,
    props: {
        value: {
            required: true,
        },
        name: {
            type: String,
            required: true,
            default: ''
        }
    },
    data() {
        return {
            currentValue: this.value,
        };
    },
    computed: {
        hasLabelSlot() {
            return !!this.$slots['label'];
        },
        additionalListeners() {
            const additionalListeners = Object.assign({}, this.$listeners);
            delete additionalListeners.change;
            delete additionalListeners.input;
            return additionalListeners;
        },
    },
    watch: {
        value(value) {
            this.currentValue = value;
        }
    },
    methods: {
        onChange(event) {
            this.$emit('input', event.target.value);
        },
    }
});

修改完成后，使用<range-slider v-model="vuejsvar"></range-slider>即可实现正常的双向绑定，拖动滑块时vuejsvar会被正确赋值为滑块的数值。

内容的提问来源于stack exchange，提问作者The Architect