CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-componentvue-router
naveen
naveen

Reputation: 937

How to show items in list uppercase?

I am trying to make simple list example in vue (A TODO LIST).Here I am trying to add filter of Uppercase (In other words all letter are in capital ).But it show's me error

here is my code https://plnkr.co/edit/THtaYSnGkBp7BlMYcNUl?p=preview

var app = new Vue({
    el: '#App',
    data: {
        message: '',
        items: [{
            name: "test1"
        }, {
            name: "test2"
        }, {
            name: "test3"
        }]
    },
    methods: {
        addTodo: function () {
           this.items.push({
               name:this.message
           });
           this.message ='';
        },
        deleteTodo:function (item) {
            console.log(item)
            var index = this.items.indexOf(item);
            this.items.splice(index, 1);
        }
    },
    computed: {
        upperCase: function () {
            return this.items.map(function (item) {
                return this.item.upperCase();
            })
        }
    }
})

Error: Error in render function: "TypeError: Cannot read property 'upperCase' of undefined"

**vue.js:572 TypeError: Cannot read property 'upperCase' of undefined
    at script.js:29
    at Array.map (<anonymous>)
    at Vue$3.upperCase (script.js:28)
    at Watcher.get (vue.js:2883)
    at Watcher.evaluate (vue.js:2990)
    at Proxy.computedGetter (vue.js:3265)
    at Proxy.eval (eval at createFunction (vue.js:9818), <anonymous>:2:311)
    at Vue$3.Vue._render (vue.js:4123)
    at Vue$3.updateComponent (vue.js:2542)
    at Watcher.get (vue.js:2883)**

Upvotes: 0

Views: 3374

Answers (4)

Steven B.
Steven B.

Reputation: 9372

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)
  }
}

Upvotes: 1

Get Off My Lawn
Get Off My Lawn

Reputation: 36341

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>

Upvotes: 3

Ofisora
Ofisora

Reputation: 2737

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

Upvotes: 1

Roy J
Roy J

Reputation: 43899

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.

Upvotes: 1

Related Questions