VUE variable.length arbeitet in Vorlage, sondern gibt Konsole Warnung

Question

Ich habe eine Vorlage, in der ich brauche die Länge eines versehen Variable wissen ...

{{ prefix }} {{ prefix.length }} 

Es spuckt die richtigen Informationen aus und scheint gut funktionieren, aber es gibt diese Warnung:

[Vue warn]: Error when evaluating expression "{ input_prefix: (prefix.length > 0)}": TypeError: Cannot read property 'length' of undefined (found in component:)

ich es wirklich möchte richtig machen, und würde die Warnung befreien. Irgendwelche Ideen?

Mit freundlichen Grüßen John Lajer

Answer 1

Wenn Präfix null oder nicht definiert, per Definition, kann es nicht eine Länge aufweisen.

Als Ergebnis machen die Länge über einen ternären Operator, die Länge Eigenschaft verwenden, wenn Präfix vorhanden ist, und in Verzug zu Null, wenn es nicht existiert:

{{ prefix && prefix.length ? prefix.length : 0 }} 

Answer 2

Sie werden mit Problemen konfrontiert, wenn der Wert null ist/undefiniert, wie von David hervorgehoben.

Ich würde eine berechnete Variable verwenden, um dieses Problem zu lösen.

Ex.

new Vue({ 
    el: '#app', 
    data: { 
    prefix: 'Some value' 
    }, 
    computed: { 
    prefixLength: function(){ 
     if(this.prefix){ 
     return prefix.length 
     } 
     return ''; 
    } 
    } 
}) 

Dazu einfach diese in Ihrer Vorlage verwenden:

{{ prefix }} {{ prefixLength }}