Vue count string length

Question

VIEW

<div v-for="(listings, index) in list4" :key="index">
   <input v-model="listings.rfidState2" type="text"/>
</div>

<div v-for="(element2, index) in list4" :key="index">
  <p v-if="list4[index].rfidState2 > 0">WORKING</p>
</div>

If I insert value as AC87SG67A for an input field it throws me an error at v-if="list4[index].rfidState2 > 0" but if I insert the value as 98292001 it displays WORKING. Is there a way to display WORKING for any value inserted such as integer or alphabet(a to z) inside <input v-model="listings.rfidState2" type="text"/> textfield ?

I guess it throws there is no definition if this literal and not a number is larger than any number? — Estradiaz
– Estradiaz, Commented Jun 23, 2020 at 5:14
'AC87SG67A' is alpha numeric while 98292001 that is why you can compare it against 0 — Karl L
– Karl L, Commented Jun 23, 2020 at 5:36

tony19 · Accepted Answer · 2022-07-15 22:21:01Z

3

First, you can add a .trim modifier to the input like:

<input v-model.trim="listings.rfidState2" type="text"/>

Now, any whitespace from user input to be trimmed automatically. Next, we can simply check if any text was entered or not like:

<p v-if="list4[index].rfidState2.length">WORKING</p>

So, if any integer or alphabet is entered then length will return a value greater than 0, which is truthy and thus the v-if will show the element, else it will be hidden.

edited Jul 15, 2022 at 22:21

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Jun 23, 2020 at 5:17

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stephen.W · Accepted Answer · 2020-06-23 06:42:28Z

0

list4[index].rfidState2 is a string. You cannot compare it with a number. If you do so, JavaScript will do the implicit type conversion, and the result will not make sense. list4[index].rfidState2.length is the actual length of the string. So, what you should write is "list4[index].rfidState2.length > 0"

answered Jun 23, 2020 at 6:42

Stephen.W

2,2061 gold badge17 silver badges20 bronze badges

Collectives™ on Stack Overflow

Vue count string length

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related