Question

我使用库element.io，并且当选择的值为“ a”时，我想将输入的“ disabled”属性更改为true。

选择：

<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>

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;我得到：

避免直接更改prop，因为每当父组件重新渲染时，该值都会被覆盖。而是使用基于属性值的数据或计算属性。道具被突变：“已禁用”

感谢您的帮助

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是同一组件的子代）

Vue JS更改外部组件的道具

1 个答案: