Vue JS изменить реквизит внешнего компонента

Question

Я использую библиотеку element.io, и я хотел бы изменить значение «disabled» prop на true на входе, когда select имеет значение «a».

Select:

<el-select v-model="selected_devise" slot="append" placeholder="Devise">
    <el-option
        v-for="item in devises"
        :key="item.value"
        :label="item.label"
        :value="item.value">
    </el-option>
</el-select>

Значения выбора:

devises: [
{
    label: 'a',
    value: 'a',
},
{
    label: 'b',
    value: 'b',
},
{
    label: 'c',
    value: 'c',
}]

Когда я выбираю 'b', я хочу отключить свой вход, и для этого мне нужно редактировать реквизиты:

<el-input type="text" ref="montant" v-model="montant" placeholder="Saisissez le montant"></el-input>

Когдая пытаюсь с этим. $ refs.montant. $ props.disabled = true;я получаю:

Старайтесь не менять объект напрямую, так как значение будет перезаписываться при повторном рендеринге родительского компонента.Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита.Опора изменена: «отключена»

Спасибо за вашу помощь

Answer 1

вероятно что-то вроде

<el-input 
   type="text" 
   ref="montant" 
   v-model="montant" 
   placeholder="Saisissez le montant" 
   :disabled="selected_devise=='b'"
></el-input>

(при условии, что el-input и el-select являются дочерними элементами одного и того же компонента)