[Vuejs]-How to show items in list uppercase?

by

1👍

✅

The mistakes you have done:

  • upperCase() is not a javascript function. It should be toUpperCase().
  • you don’t have to use this.item, just use item inside the callback function.
  • Since item is an object, you cannot perform toUpperCase() method. You have to do item.name.toUpperCase() (that is what you are trying to do).

Change your upperCase function to : 

upperCase: function () {
    return this.items.map(function (item) {
           return item.name.toUpperCase();
    })
}

  • You are returning the value from upperCase function but trying to display item.name in your index.html file. Change that to item only.

    <li v-for="item in upperCase" >
   {{item}}
   <button @click="deleteTodo(item)">X</button>
</li>

Updated plnkr: https://plnkr.co/edit/17dCvKKDa7EgwHetzzMR?p=preview

👤Ofisora

2👍

You could skip javascript all together and use CSS to make text uppercase.

.uppercase {
  text-transform: uppercase;
}
<p class="uppercase">I am uppercase</p>
<p>I am normal case</p>
👤Get Off My Lawn

1👍

Your function inside map should refer to item (its parameter) rather than this.item, which doesn’t exist, because the function isn’t being called as a method.

👤Roy J

1👍

For possible future readers, filters were specifically made for this with the benefit of being reusable rather than having a computed property for each list you need to capitalize.

Vue.js allows you to define filters that can be used to apply common
text formatting.

Template:

<li v-for="item in items" >
    {{item.name | capitalize}}
    <button @click="deleteTodo(item)">X</button>
</li>

Filter:

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
👤Steven B.

Leave a comment