Javascript Vue v-for循环-如何在筛选阵列时以组件为目标

我使用一个计算值来动态过滤数组（“订单”）

computed

.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-for

循环呈现搜索结果，如下所示：

 <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>

但是，过滤数组（“过滤”）中组件的

索引

与原始数组（“订单”）中组件的

索引

不同，因此

添加事件

方法针对的是错误的组件

---

我可以使用

键

定位正确的部件吗？或者是否有其他方法来识别过滤数组中的目标组件？

您可以映射原始数组，并将an

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>

无需跟踪
索引
filtered
只是对
orders
中原始对象的引用数组，因此您可以在
add_events（）
中修改
order
迭代器以达到所需的效果：

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


newvue({
el:“#应用程序”，
数据（）{
返回{
订单：[
{id:1，订单号：111，姓名：'John'，参考号：'R111'}，
{id:2，订单号：222，名称：'Bob'，参考号：'R222'}，
{id:3，订单号：333，姓名：'Bob'，参考号：'R333'}，
],
搜索：“”
};
},
计算：{
过滤的（）{
返回此.orders.filter（订单=>{
常数s=
order.order\u编号+order.reference+order.name；
const su=s.toUpperCase（）；
返回su.match（this.search.toUpperCase（））；
});
}
},
方法：{
添加事件（顺序、索引）{
常数对象=[
{id:1，名称：'Event 1'}，
{id:2，名称：'Event 2'}，
{id:3，名称：'Event 3'}
];
此.$set（顺序，“事件”，对象）；
}
}
})

{{顺序.顺序号}
{{order.reference}}
{{order.name}
{{order.events}}
{{orders}}
这将起作用-谢谢。但我曾希望有某种方法可以选择Vue内部用于针对单个组件的
键
字段。@AlexWebster抱歉，可能我误解了您的用例否-我认为您完全理解我的问题，但我走错了方向。@tony19接受的答案表明，实际上并不需要索引。再次感谢。
this.$set(order, 'events', objEvents);