Vue 3: Conditional v-if on hmtl attributes-CodePudding

I'm trying to conditional rendering an HTML Elements attribute:

EG:

<InputNumber v-model:value="example[index].number" 
     :min="collector.attr[0] ? collector.attr[0] : 0" 
     :max="collector.attr[1] ? collector.attr[1] : 0" 
     :step="0.01"
     style="min-width: 120px;"/>

The Problem: the minimum Value of 0 is set (collector.attr[0] = null), but I want eg. that user is able to enter '-100'

The Goal: if the collector.attr[1] is "null" i want to remove the ":min" attribute - resp. only allow this attribute, if there is a minimum value set.

Like so:

<InputNumber
     v-if="collector.attr[0]" => then :min="collector.attr[0]" 
 />

Thank you very much for your help :)

CodePudding user response：

Probably you can set a minimum value beyond which a user is not expected to input anything. Something like this

<InputNumber :min="collector.attr[0] ? collector.attr[0] : -Number.MAX_VALUE"  />

Where Number.MAX_VALUE is maximum allowed float value in java script, so adding -1 in it makes it negative.