Wie zeigen Sie Elemente in der Liste Großbuchstaben?

Question

ich einfache Liste Beispiel in vue (A ToDo-Liste) .Hier Ich versuche hinzufügen Filter von Versalien (Mit anderen Worten: alle Buchstaben sind in der Hauptstadt) zu machen versuchen .Aber es mir zeigt hier ist Error

mein 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(); 
      }) 
     } 
    } 
}) 

Fehler: Fehler in Funktion machen: "Typeerror: Kann nicht Eigentum 'Großschreibung' undefinierter lesen"

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

Answer 1

Die Fehler, die Sie gemacht haben:

• upperCase() kein Javascript-Funktion ist. Es sollte toUpperCase() sein.
• müssen Sie nicht this.item verwenden, verwenden Sie einfach item innerhalb der Callback-Funktion.
• Da item ein Objekt ist, können Sie die Methode toUpperCase() nicht ausführen. Sie müssen item.name.toUpperCase() tun (das ist, was Sie versuchen).

Ihre upperCase Funktion ändern:

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

• Sie den Wert aus upperCase Funktion zurückkehrt, sondern versuchen item.name in Ihrer index.html Datei anzuzeigen. Ändern Sie das nur in item.

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

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

Answer 2

Ihre Funktion innerhalb von map sollte sich auf item (ihr Parameter) beziehen und nicht auf this.item, was nicht existiert, weil die Funktion nicht als Methode aufgerufen wird.

Answer 3

Sie könnten Javascript alle zusammen und verwenden CSS überspringen, um Text in Großbuchstaben zu machen.

.uppercase { 
 
    text-transform: uppercase; 
 
}

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

Answer 4

Für mögliche zukünftige Leser, filters wurden dafür mit dem Vorteil, dass sie wiederverwendbar, anstatt mit einer berechneten Eigenschaft für jede Liste, die Sie zu nutzen, müssen speziell hergestellt.

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

Vorlage:

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