How to dynamically set readonly property for based on value in Vue.js?

I wanted that in ‘change’ if the value of the input-number becomes equal to, for example, ‘5’ I wanted it to assign the readonly property or at least have the same behavior as the property in that input-number, as it is now it is not working

<el-input-number
    v-model="q.values[a-1].value_numeric"
    :disabled="isParameterDisabled(q) || q.parameter.calculated"
    :readonly="isReadonly || isParameterReadonly(q)"
    :ref="'f_'+q.id+'_n'+a"
    :id="'f_'+q.id+'_n'+a"
    :key="q.id+'_n'+a"
    :placeholder="'n'+a"
    :precision="q.typeProps.precision ? parseInt(q.typeProps.precision) : defaultPrecision"
    @change="onNumericValueChanged($event, q, a, f.title)"
    @keydown.enter.native="focusNextInput(q.id, a)"
    :class="loadTrafficLightNumeric(q, q.values[a - 1].value_numeric)"
/>

onNumericValueChanged(value, q, a, className) {

    if (value === 5) {
       this.isReadonly = true;
    } else {
        this.isReadonly = false;
    }
}

You need to sign in to view this answers

Related Post