javascript - Leveraging the v-for loop for places outside the v-for -

while looping on array of sales , need capture object of salesperson === "bar" , print sellvalue outside v-for block.

of course can't access array in hard-coded way. have assume position of object i'm looking random.

also, can't add loop on top of 1 loop exist here. (v-for loop obviously).

i need way achieve it.

here example component:

<template>   <div id="app">     <!-- need print here sellvalue of 'bar' -->     <p v-for="(sell,index) in sales"       :key="index">{{sell.sellvalue}}</p>   </div> </template>  <script> export default {   name: 'app',   data() {     return {       sales: [         {           salesperson: 'foo',           sellvalue: 1         },         {           salesperson: 'bar',           sellvalue: 2         }       ]     }   } } </script> 

you can try using custom html tag (not registered component vue), it's quite "ugly" solution think of (beware of vue's warnings if not disabled) :

<template>   <div id="app">     <uglytag v-for="(sell,index) in sales" :key="index">       {{sell[ sell.findindex( e=>e.salesperson==="bar" ) ].sellvalue}}       <p>{{ sell.sellvalue }}</p>     </uglytag>   </div> </template> 

solution rethink construction of data have (but still needs uglytag method) :

data(){   return {     salestitle: 2,     sales: [       {         salesperson: 'foo',         sellvalue: 1       },       {         salesperson: 'bar',         sellvalue: 2       }     ]   } } 

and

<template>   <div id="app">     <uglytag v-for="(sell,index) in sales" :key="index">       {{ salestitle }}       <p>{{ sell.sellvalue }}</p>     </uglytag>   </div> </template>