Каким образом можно редактировать значения параметров компонента?

Question

[Tenebrius]

Есть кастомный элемент range (обертка тега input[type='range']), при определенных событиях меняется его параметр grad. Вообще это внутренний параметр, который не должен быть доступен извне. Он отвечает за визуальное отображение заданного значения.

VUE ругается, что напрямую такие параметры редактирвать нельзя:
vue.js:597 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "grad"

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

Как правильно создавать "приватные" свойства компонента VUE v2?
Что делать, если параметр задается родителем, но его нужно изменить?

Answer 1

[0xD34F]

Делаете grad вычисляемым свойством, вместо установки значения делаете emit, и используете v-model. Как-то так.

Comments

[Tenebrius]

Спасибо!
Я правильно понимаю, что "this.$emit('input', +nPercent);" вызывает срабатывание стандартного события изменения значения input'?

[0xD34F]

Tenebrius, ну да. Чтобы можно было использовать v-model, компонент должен принимать параметр value (он у вас уже был), и генерировать событие input.

[Tenebrius]

0xD34F, а еще такой вопрос. Как передавать разные значения разным range'ам?
Ведь все они должны принимать параметр "value", но в модели они должны называться по-разному.

Как передать параметры value2 и value3?

var player = new Vue({
    el: '#app',
    data: {
      value: 50,
      value2: 25,
      ranges: [
        {
           value3: 75
        }
      ]
    }
});

<range v-model.number='value'></range>
<range v-model.number='value2'></range>
<range  v-for="elem in ranges" v-model.number='elem.value3'></range>

UPD. Разобрался. Большое спасибо за помощь!