Vue js change props of an external component

Question

I use the library element.io and i would like to change "disabled" prop to true on an input when a select has the value "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>

Values of the select :

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

When i select 'b' i want to set my input to disabled, and for this i have to edit props :

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

When i try with this.$refs.montant.$props.disabled = true; i get :

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: "disabled"

Thanks for your help

You shouldn't mutate a prop directly in the child component. Instead what you should do is use this.$emit to emit a custom event in the child component and have the parent listen for the event and mutate the prop. Please refer to this — Husam Ibrahim
Ok i see the "idea", could give me for details please? Because i work with elementUI (external lib component) — alxb

tato tato · Accepted Answer · 2018-10-08T22:14:16

probably something like

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

(assuming that el-input and el-select are children of the same component)

Vue js change props of an external component

1 Answers