如何以大写列表显示项目？

Question

我正在尝试在 vue 中制作简单的列表示例（A TODO LIST）。在这里，我正在尝试添加大写过滤器（换句话说，所有字母都是大写的）。但它显示我的错误

这是我的代码 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();
            })
        }
    }
})

错误：渲染函数错误："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.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.Vue._render (vue.js:4123)
    at Vue.updateComponent (vue.js:2542)
    at Watcher.get (vue.js:2883)**

Answer 1

您在 map 中的函数应该引用 item（它的参数）而不是 this.item，后者不存在，因为该函数没有作为方法调用.

Answer 2

你犯过的错误：

upperCase() 不是 javascript 函数。应该是 toUpperCase().
您不必使用this.item，只需在回调函数中使用item即可。
因为item是一个对象，你不能执行toUpperCase()方法。你必须做 item.name.toUpperCase()（这就是你想要做的）。

将您的 upperCase 函数更改为：

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

您正在从 upperCase 函数返回值，但试图在您的 index.html 文件中显示 item.name。仅将其更改为 item。
```
<li v-for="item in upperCase" >
   {{item}}
   <button @click="deleteTodo(item)">X</button>
</li>
```

更新的 plnkr：https://plnkr.co/edit/17dCvKKDa7EgwHetzzMR?p=preview

Answer 3

您可以跳过 javascript 并使用 CSS 将文本变为大写。

.uppercase {
  text-transform: uppercase;
}

<p class="uppercase">I am uppercase</p>
<p>I am normal case</p>

Answer 4

对于未来可能的读者，filters 是专门为此制作的，其好处是可以重复使用，而不是为每个需要大写的列表计算属性。

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

模板：

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

过滤器：

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

如何以大写列表显示项目？

How to show items in list uppercase?

javascript

vue.js

vue-router

vue-component

vuejs2