Как организовать двусторонний биндинг в инпуте, вложенном в компонент?

Question

[Tenebrius]

Добрый день.

Пытаюсь сделать обертку над стандартным инпутом, проблема в том, что внутрь данные передаются, но не идут наружу.

Примеры: https://jsfiddle.net/Tenebrius/c7r8h5gf/28/

В первом примере все работает отлично.
Во втором, данные меняются внутри, но не идут наружу, в основную модель.
А третий пример актуальный, примерно такое хочу организовать.

Answer 1

[0xD34F]

Во-первых, параметры напрямую менять не надо; во-вторых, надо пробрасывать в родительский компонент событие input, т.е. в компоненте wrapped-range замените

<range v-model.number='value'></range>

на

<range :value="value" @input="$emit('input', $event)"></range>