Vue - How to convert the string to a Number

In this tutorial, we are going to learn about how to convert the string to a number in Vue using Number() method.

Consider, we have a following price string in our Vue app:

<template>
  <div id="app">
    <h1>Converting string to a number</h1>
    <p>{{ price }}</p>
  </div>
</template>

<script>
export default {
  data(){
    price: "23"
  }
};
</script>

Now, we need to convert above string to a number.

Using the Number() method

To convert the string to a number, we can use the Number() method in Vue.

The Number() takes the value as an argument and converts it to a number. If value cannot be converted as a number it returns NaN.

Here is an example:

<template>
  <div id="app">
    <h1>Converting string to a number</h1>
    <p>{{ Number(price) }}</p>
  </div>
</template>

<script>
export default {
  data(){
    price: "23"
  }
};
</script>

Similarly, we can also use the parseInt() method in vue, to convert the string to a number.

The parseInt() method takes the two arguments, the first argument is a string and the second argument is the base of a required number that should be converted.

<template>
  <div id="app">
    <h1>Converting string to a number</h1>
    <p>{{ parseInt(price, 10) }}</p>
  </div>
</template>

<script>
export default {
  data(){
    price: "23"
  }
};
</script>