CODEWITHSUNDEEP
vue.jsvuejs2
Fabrizio
Fabrizio

Reputation: 73

How do I make the first letter uppercase in vuejs

I want the first letter of this data to be Uppercase

<li>{{error}}</li>

how can i do?

Upvotes: 1

Views: 8556

Answers (2)

Thomas Fortin
Thomas Fortin

Reputation: 255

It is an old post, but it may be useful for new users :

With Vue 3, there is a so much simpler way, given by Vue itself inside thee @vue/shared package :

<script setup>
  import { capitalize } from 'vue';
  ...
</script>

<template>
  ...
  <ul>
    <li>{{ capitalize(error) }}</li>
  </ul>
  ...
</template>

You can find the precise source code here.

Upvotes: 0

tony19
tony19

Reputation: 138566

Option 1: String interpolation

You could use toUpperCase() on the first character of error, and append the remaining characters with slice(1). Do this directly in the string interpolation (i.e., the curly brackets in the template).

<li>{{ error[0].toUpperCase() + error.slice(1) }}</li>

Option 2: Computed prop

Similar to the above, you could use a computed property to create the string, and render that in the string interpolation:

<li>{{ computedError }}</li>

<script>
export default {
  computed: {
    computedError() {
      return this.error[0].toUpperCase() + this.error.slice(1)
    }
  }
}
</script>

Option 3: CSS text-transform: capitalize

Instead of JavaScript, you could do this with CSS, using text-transform:

<li class="error">{{ error }}</li>

<style scoped>
.error {
  text-transform: capitalize;
}
</style>

Upvotes: 5

Related Questions