뷰 필터링은이 같은 객체의 배열 (대륙)의 등록 정보

Question

객체 이 같은 v-for 지시어 :

<input v-model="filter" type="text"> 
<div v-for="continent in filtered" v-if="filtered.length" class="countries-group"> 
    <h4>{{ continent.name }}</h4> 
    <ul class="country-list"> 
     <li v-for="country in continent.countries" class="country-item">{{ country.name }}</li> 
    </ul> 
</div> 

그리고 거의 작동하지만 내 계산 된 속성 fi ltered는 원래 국가 데이터를 수정하므로 필터 v-model을 백 스페이스하려고 할 때 필터링 된 객체로 이미 재정의되어 있기 때문에 inited 데이터를 반환하지 않습니다. 필터링

Answer 1

내 계산 속성은 원래 contries에 데이터

당신은이 작업을 수행하지 않아야을 수정합니다. 계산 된 속성 내에서 상태를 수정하지 마십시오. 다른 계산 된 속성을 다시 평가하여 혼란스러운 버그를 유발할 수 있습니다. 계산 된 속성은 어떤 식 으로든 구성 요소의 상태를 변형 (변경하지 않고)하는 순수한 함수입니다.

이 시도 :

filtered() { 
    const filter = this.filter.toLowerCase(); 

    return this.continents 
    .map(continent => Object.assign({}, continent, { 
     countries: continent.countries.filter(country => { 
     return country.name.toLowerCase().includes(filter); 
     }), 
    }) 
    .filter(continent => continent.countries.length); 
}