v-forループ以外の場所でv-forループを利用する

Question

salesの配列をループしている間に、salesPerson === "bar"のオブジェクトをキャプチャしてv-forブロックの外にsellValueという文字列を表示する必要があります。

もちろん、ハードコードされた方法で配列にアクセスすることはできません。私は、私が探しているオブジェクトの位置がランダムであると仮定しなければならない。

また、ここに既に存在する1つのループの上に別のループを追加することはできません。 （v-forは明らかにループです）。

私はそれを達成する方法が必要です。ここ

は例のコンポーネントです：

<template> 
    <div id="app"> 
    <!-- i need to print here the 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> 

Answer 1

カスタムHTMLタグを使用して試すことができます（Vueのためのコンポーネントとして登録されていない）、それはかなり「醜い」ですが、それは私が考えることができる唯一のソリューションです。

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

は別の解決策は、あなたが持っていることができるようにあなたのデータの構築を再考するだろう（それでもuglyTag方法を必要とします）：：（無効になっていない場合のVueの警告に注意）

data(){ 
    return { 
    salesTitle: 2, 
    sales: [ 
     { 
     salesPerson: 'foo', 
     sellValue: 1 
     }, 
     { 
     salesPerson: 'bar', 
     sellValue: 2 
     } 
    ] 
    } 
} 

と

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

Answer 2

おそらく、私が正しく質問を理解していなかったが、あなたはあなたのコンポーネントの同じスコープに残っています。興味のある値のゲッターを追加して、どこに表示するのがいいでしょうか。

Vue.component('my-template', { 
 
    template: ' <div id="app">\ 
 
     <!-- i need to print here the sellValue of \'bar\' -->\ 
 
\t \t \t <p>{{ saleValue }}</p>\ 
 
     <p v-for="(sell,index) in sales" :key="index">{{sell.sellValue}}</p>\ 
 
    </div>', 
 
    data: function() { 
 
    return { 
 
     sales: [{ 
 
     salesPerson: 'foo', 
 
     sellValue: 1 
 
     }, { 
 
     salesPerson: 'bar', 
 
     sellValue: 2 
 
     }] 
 
    } 
 
    }, 
 
\t computed: { 
 
\t \t saleValue: function() { 
 
\t \t \t return this.sales.filter(function(val) { 
 
\t \t \t \t return val.salesPerson === 'bar'; 
 
\t \t \t })[0].sellValue; 
 
\t \t } 
 
\t } 
 
}); 
 

 
var vm = new Vue({ 
 
\t el: '#vm', 
 
\t data: {} 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> 
 
<div id="vm"> 
 
    <my-template></my-template> 
 
</div>