1👍
The mistakes you have done:
upperCase()
is not a javascript function. It should betoUpperCase()
.- you don’t have to use
this.item
, just useitem
inside the callback function. - Since
item
is an object, you cannot performtoUpperCase()
method. You have to doitem.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 displayitem.name
in yourindex.html
file. Change that toitem
only.<li v-for="item in upperCase" > {{item}} <button @click="deleteTodo(item)">X</button> </li>
Updated plnkr: https://plnkr.co/edit/17dCvKKDa7EgwHetzzMR?p=preview
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>
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.
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)
}
}