v-itemでメソッドごとに返されるデータにアクセスする方法

Question

v-forの各項目からメソッドを呼び出しています。メソッドは適切なオブジェクトを返しますが、私は.cardの他の部分でその情報にアクセスしたいと思います。 {{name}}のようなものは、そのメソッドから返されたスポンサーの名前を反映します。通常、私はこのメソッドを使ってデータをVueデータにプッシュし、項目を介してアクセスします。しかし、これは200以上のアイテムには奇妙なことです。

HTML：：

<div v-for="deal in deals"> 
    <div class="card"> 
    <h3>{{deal.name}}</h3> 
    <p>{{ getSponsor(key) }}</p> 
    <p>{{sponsor.name}}</p> 
    </div> 
</div> 

JS：

firebase() { 
    return { 
    deals: db.ref('deals'), 
    businesses: db.ref('businesses') 
    } 
}, 
methods: { 
    getDealSponsor (key) { 
    db.ref('businesses').child(key).on('value', snap => { 
     return snap.val() 
    }) 
    } 
} 

JSON：

deals 
    -SomeDeal(Firebase Key) 
    name: "Some Deal" 
    provider: -SomeBusiness (Firebase KEy) 
businesses 
    -SomeBusiness (Firebase KEy) 
    name: "Some Business Name" 

を（おそらく、私はそのロジックで何かが欠けています）私は、次のVueJSを設定しています

Answer 1

実際の方法はありませんそれはオーバールーピング何ループ内の「一時変数」を作る、しかし、あなたはのためv-forはエイリアスを作るという事実を使用することができます。コンポーネントにちょうど小道具である

<div v-for="deal in deals"> 
    <div class="card"> 
    <h3>{{deal.name}}</h3> 
    <template v-for="sponsor in [getSponsor(key)]"> 
     <p>{{ sponsor }}</p> 
     <p>{{sponsor.name}}</p> 
    </template> 
    </div> 
</div> 

key場合、あなたが計算に基づくことができますその上に：

sponsor() { 
    return getSponsor(key); 
} 

と私は上記の別名を使用してそれを使用します。