Type cast in style in a Vue component

📅 Jul 14, 2019 · 📝 Apr 30, 2020 · ☕ 1 min read

#learn
#VueJS

Do you type cast in Vue? Of course you do. So, is there a way to just not use Javascript shortcuts since they are so cumbersome?

Really?

You find this cumbersome?

1
2


let myNumStr = +myNum;
let myStrNum = "" + myStr;

See more at type casting in Javascript and shortcuts to type cast.

Regardless of your opinion, with Vue you now have the option to see more.. options.

See below -

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<template>
  <input v-model.number="position" type="number" />
</template>
<script>
  export default {
    data() {
      return {
        position: 0
      };
    }
  };
</script>

Bad news if you wanted to go overboard with this - number is literally the only thing supported here. So, back to the cumbersome Javascript type conversions for rest of the use cases.

Also see

Other modifiers supported on v-model.

Stay in touch!

Share on

WRITTEN BY

Prashanth Krishnamurthy

Technologist | Creator of Things

Type cast in style in a Vue component

Also see

See Also