Vue v-for 루프 - 어레이를 필터링할 때 구성 요소를 대상으로 지정하는 방법

Vue v-for 루프 - 어레이를 필터링할 때 구성 요소를 대상으로 지정하는 방법

계산된 값을 사용하여 어레이("주문")를 동적으로 필터링하고 있습니다.

계산한.filter()함수를 사용하면 주문 번호, 이름 또는 참조별로 동적으로 검색할 수 있습니다.

data() {
  return {
    orders: [],
    search: ""  // search string from a text input    
  };
},

computed: {
  filtered: 
    return this.orders.filter(order => {
      const s =
        order.order_number + order.reference + order.name;
      const su = s.toUpperCase();
      return su.match(this.search.toUpperCase());
    });
  }

사용하고 있다v-forloop을 사용하여 다음과 같이 검색 결과를 렌더링합니다.

 <tbody v-for="(order, index) in filtered" :key="order.id">              
   <tr>       
     <td @click="add_events(order, index)>{{order.order_number}}</td>
     <td>{{order.reference}}</td>
     <td>{{order.name}}</td>
      ...
    </tr>
  </tbody>

사용하고 싶다@click필터링된 배열의 특정 구성 요소(객체)를 대상으로 하여 사용하다$set값("objEvents")을 해당 개체에 추가하려면:

methods: {
  add_events (order, index) {
    const objEvents= [ external data from an API ]      
    this.$set(this.orders[index], "events", objEvents)          
  }
}

하지만, 그index필터링된 어레이의 컴포넌트("component")가 그 컴포넌트("component")와index원래 배열('주문')에 포함되므로add_events메서드가 잘못된 컴포넌트를 대상으로 합니다.

사용할 수 있습니까?key올바른 컴포넌트를 타겟으로 하고 있습니까?또는 필터링된 어레이 내의 타깃 컴포넌트를 식별할 수 있는 다른 방법이 있습니까?

추적할 필요가 없습니다.index.filtered에 있는 원래 오브젝트에 대한 참조 배열입니다.orders를 변경할 수 있습니다.order의 반복자.add_events()원하는 효과를 얻기 위해:

this.$set(order, 'events', objEvents);

new Vue({
  el: '#app',
  data() {
    return {
      orders: [
        {id: 1, order_number: 111, name: 'John', reference: 'R111'},
        {id: 2, order_number: 222, name: 'Bob', reference: 'R222'},
        {id: 3, order_number: 333, name: 'Bob', reference: 'R333'},
      ],
      search: ''
    };
  },
  computed: {
    filtered() {
      return this.orders.filter(order => {
        const s =
              order.order_number + order.reference + order.name;
        const su = s.toUpperCase();
        return su.match(this.search.toUpperCase());
      });
    }
  },
  methods: {
    add_events(order, index) {
      const objEvents = [
        {id: 1, name: 'Event 1'},
        {id: 2, name: 'Event 2'},
        {id: 3, name: 'Event 3'}
      ];
      this.$set(order, "events", objEvents);
    }
  }
})

<script src="https://unpkg.com/vue@2.5.17"></script>

<div id="app">
  <input type="text" v-model="search" placeholder="Search">
  <table>
    <tbody v-for="(order, index) in filtered" :key="order.id">              
      <tr>
        <td @click="add_events(order, index)">{{order.order_number}}</td>
        <td>{{order.reference}}</td>
        <td>{{order.name}}</td>
        <td>{{order.events}}</td>
      </tr>
    </tbody>
  </table>
  
  <pre>{{orders}}</pre>
</div>

원래 어레이를 매핑하고 v-center Server Server에 추가할 수 있습니다.origIndex다음과 같이 각 항목에 속성을 지정합니다.

    computed:{
        filtered(){
           let mapped= this.orders.map((item,i)=>{
                             let tmp=item;
                              tmp.origIndex=i;
                             return tmp;
                            });
             return this.mapped.filter(order => {
                    const s =
                      order.order_number + order.reference + order.name;
                       const su = s.toUpperCase();
                    return su.match(this.search.toUpperCase());
             });
            }
        }//end computed

템플릿에서origIndex대신 재산index

           <tbody v-for="(order, index) in filtered" :key="order.id">              
              <tr>       
                <td @click="add_events(order, order.origIndex)>{{order.order_number}}</td>
               <td>{{order.reference}}</td>
                <td>{{order.name}}</td>
                 ...
               </tr>
            </tbody>

언급URL : https://stackoverflow.com/questions/53508790/vue-v-for-loop-how-to-target-component-when-array-is-filtered