>
<span v-for="r in results" >{{ r.owner.first_name }} {{ r.owner.last_name}} </span>

결과는 한 번만 표시해야합니다.

그 코드로 다음을 얻을 수 있습니다 :

John Doe 
John Doe 
John Doe

한 명의 소유자에게만 표시하면됩니다 :

John Doe

가능합니까?


  • 답변 # 1

    this.results 인 계산 된 속성 만들기  중복 없음 (Lodash>4.0.0으로 가정) :

    computed: {
      resultsUniqueNames() {
        return _.uniqBy(this.results, function (r) {
          return r.owner.first_name + r.owner.last_name;
        });
      }
    }
    
    

    그리고 다음과 같이 사용하십시오 :

    <span v-for="r in resultsUniqueNames">{{ r.owner.first_name }} {{ r.owner.last_name}} </span>
    
    

    데모 :

    new Vue({
      el: '#app',
      data: {
        results: [
          {owner: {first_name: 'John', last_name: 'Doe'}},
          {owner: {first_name: 'John', last_name: 'Doe'}},
          {owner: {first_name: 'John', last_name: 'Doe'}}
        ]
      },
      computed: {
        resultsUniqueNames() {
          return _.uniqBy(this.results, function(r) {
            return r.owner.first_name + r.owner.last_name;
          });
        }
      }
    })
    
    
    span { display: block; }
    
    
    <script src="https://unpkg.com/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.5/lodash.min.js"></script>
    <div id="app">
      Using results:
      <span v-for="r in results">{{ r.owner.first_name }} {{ r.owner.last_name}} </span>
      <hr>
      Using resultsUniqueNames:
      <span v-for="r in resultsUniqueNames">{{ r.owner.first_name }} {{ r.owner.last_name}} </span>
    </div>
    
    

관련 자료

  • 이전 ld에서 정의되지 않은 기호 오류를 제한하는 방법은 무엇입니까?
  • 다음 swift4 - Swift에서 flatMap과 compactMap의 차이점