Vue Js capitalize first letter of each word in a string:To capitalize the first letter of each word in a string using Vue.js, you can create a custom method that takes the string as an input, splits it into individual words using the split() function, and then capitalizes the first letter of each word using the toUpperCase() function. Finally, you can join the capitalized words back into a string using the join() function.

How can I Vue Js capitalize the first letter of each word in a string?

The Below code is solution for capitalizing the first letter of each word in a string using Vue.js.

In the method capitalizeWords, the input str is split into an array of words using the split method with a space delimiter. Then, the map method is used to iterate through each word in the array and return a new array with each word capitalized. This is done by using the charAt method to retrieve the first character of each word and converting it to uppercase using the toUpperCase method. The rest of the word is obtained using the slice method, which starts from the second character and returns the rest of the word. Finally, the join method is used to join the capitalized words back into a single string with spaces between them.

The output of the method capitalizeWords("font awesome icons") will be "Font Awesome Icons". This is because each word in the input string has been capitalized in the output string.

Vue Js capitalize first letter of each word in a string Example

<div id="app">
  <p>{{ capitalizeWords("font awesome icons") }}</p>
</div>
    <script type="module">
        const app = Vue.createApp({
            methods: {
                capitalizeWords(str) {
                    return str.split(" ").map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
                }
            }

        })app.mount('#app')
 </script>

Output of Vue Js capitalize first letter of each word in a string