VUE의 variable.length는</p> <pre><code>{{ prefix }} {{ prefix.length }} </code></pre> <p>올바른 정보를 뱉어과에 보인다 ... 템플릿에서 작동하지만, 콘솔 경고

Question

내가 제공된 변수의 길이를 알 필요가있는 템플릿을 제공 잘 작동하지만 경고 메시지가 표시됩니다.

[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 또는 정의되지 않은 경우 , 그것은 길이를 가질 수 없습니다. 값이 null 인 경우

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

Answer 2

당신은 문제에 직면합니다 : 존재하지 않는 경우

은 결과, 제로로 접두사가있는 경우 길이 속성을 사용하고 불이행하는 삼항 연산자를 통해 길이를 렌더링/David에 의해 지적 된 것과 같이 정의되지 않았다.

이 문제를 해결하기 위해 계산 된 변수를 사용합니다.

Ex.

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

그런 다음 당신은 당신의 템플릿이 사용

{{ prefix }} {{ prefixLength }}