Vuejs2 - 구성 요소의 계산 된 속성

Question

이름을 표시하는 구성 요소가 있습니다. 각 이름의 글자 수를 계산해야합니다. nameLength을 계산 된 속성으로 추가했지만 vuejs는 루프에서이 속성을 확인하지 않습니다.

var listing = Vue.extend({ 
    template: '#users-template', 
    data: function() { 
     return { 
      query: '', 
      list: [], 
      user: '', 
     } 
    }, 
    computed: { 
     computedList: function() { 
      var vm = this; 
      return this.list.filter(function (item) { 
       return item.toLowerCase().indexOf(vm.query.toLowerCase()) !== -1 
      }) 
     }, 
     nameLength: function() { 
      return this.length; //calculate length of current item 
     } 
    }, 
    created: function() { 
     this.loadItems(); 
    }, 
    methods: { 
     loadItems: function() { 
      this.list = ['mike','arnold','tony'] 
     }, 
    } 
}); 

http://jsfiddle.net/apokjqxx/22/

은 그래서

마이크-4

아놀드-6

토니-4

Answer 1

는 계산 된 재산에 대한 몇 가지 오해가있는 것 같습니다 예상 된 결과. 바이올린에서 포크를 만들었으므로 필요에 따라 작동합니다. 코멘트에서

http://jsfiddle.net/6vhjq11v/5/

nameLength: function() { 
    return this.length; //calculate length of current item 
} 

는 "현재 항목의 길이를 계산"하지만 JS는이 뷰 구성 요소 그 자체에 길이를 실행

this.length 

현재 항목의 개념을 얻을 질수 있음을 보여줍니다 그 가치가 아닙니다.

계산 된 속성이 인스턴스의 다른 속성 및 반환 값에서 작동합니다.

여기에 아무 것도 지정하지 않았으므로이 속성을 사용할 수 없습니다.

추가 정보가 필요하면 의견을 말하십시오.