VueJS v-for와 함께 계산 된 속성을 어떻게 사용할 수 있습니까?

VueJS v-for와 함께 계산 된 속성을 어떻게 사용할 수 있습니까?

---

목록에서 계산 된 속성을 어떻게 사용할 수 있습니까? VueJS v2.0.2를 사용하고 있습니다.

HTML은 다음과 같습니다.

<div id="el">
    <p v-for="item in items">
        <span>{{fullName}}</span>
    </p>
</div>

다음은 Vue 코드입니다.

var items = [
    { id:1, firstname:'John', lastname: 'Doe' },
    { id:2, firstname:'Martin', lastname: 'Bust' }
];

var vm = new Vue({
    el: '#el',
    data: { items: items },
    computed: {
        fullName: function(item) {
            return item.firstname + ' ' + item.lastname;
        },
    },
});

---

각 반복에 대해 계산 된 속성을 만들 수 없습니다. 이상적으로, 이들 각각은 items자신의 것이 자신의 각자가 자신의 할 수 있도록 구성 요소 fullName계산 된 속성을.

user구성 요소 를 생성하지 않으려면 대신 메서드를 사용하면됩니다. 속성 fullName에서 로 바로 이동할 수 있으며 다음과 같이 사용할 수 있습니다.computedmethods

{{ fullName(user) }}

또한, 인수를 전달해야하는 경우 computed에는 메서드를 대신 사용하고 싶을 것입니다.

---

여기서 놓친 것은 items모든 항목을 보유하는 배열이지만 .s의 모든 s를 표현할 수없는 computed단일 입니다 . 이 시도:fullNamefullNameitems

var vm = new Vue({
    el: '#el',
    data: { items: items },
    computed: {
        // corrections start
        fullNames: function() {
            return this.items.map(function(item) {
                return item.firstname + ' ' + item.lastname;
            });
        }
        // corrections end
    }
});

그런 다음보기에서 :

<div id="el">
    <p v-for="(item, index) in items">
        <span>{{fullNames[index]}}</span>
    </p>
</div>

방법은 빌 소개하고 확실하게 작동하지만, 우리는 할 수 계산 된 소품와 함께 할 그리고 그것이보다 더 좋은 디자인이라고 생각 method응용 프로그램이 커질수록, 특히 반복한다. 또한 일부 상황에 computed비해 성능이 향상 method됩니다. http://vuejs.org/guide/computed.html#Computed-Caching-vs-Methods

참조 URL : https://stackoverflow.com/questions/40322404/vuejs-how-can-i-use-computed-property-with-v-for