Vue 3: Conditional v-if on hmtl attributes


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 🙂

Source: Vue – Stack Overflow

November 11, 2021
Category : News
Tags: conditional-statements | Vue.js | vuejs3

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.