How do I make the first letter uppercase in vuejs

Question

I want the first letter of this data to be Uppercase

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

how can i do?

Answer 1

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>