VUE variable.length工程模板，但給控制檯的警告

Question

我有，我需要知道一個提供可變長度的模板......

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

它吐出來的是正確的信息，似乎工作很好，但它給出了這樣的警告：

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

我真的很想做正確的，並擺脫警告。有任何想法嗎？

問候 約翰Lajer

Answer 1

如果前綴爲null或undefined，顧名思義，它不能有長度。

結果，通過三元運營商呈現的長度，使用length屬性，如果前綴存在，缺省值爲零，如果它不存在：

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

Answer 2

當值爲null你會面對的問題/大衛指出的未定義。

我會使用計算的變量來解決這個問題。

例。

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

那你只是在你的模板中使用這樣的：

{{ prefix }} {{ prefixLength }}