ネストされたループ

Question

Iは

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    tasks: ['task1', 'task2', 'task3'], 
 
    actions: { 
 
     'task1': { 
 
     name: 'dig', 
 
     time: '20min' 
 
     }, 
 
     'task2': { 
 
     name: 'run', 
 
     time: '1h' 
 
     }, 
 
     'task3': { 
 
     name: 'drinking', 
 
     time: 'all night' 
 
     } 
 
    } 
 
    }, 
 
    template: ` 
 
    <ul> 
 
     <li v-for="task in tasks"> 
 
     {{ actions[task].name }} will take {{ actions[task].time }} 
 
     </li> 
 
    </ul> 
 
    ` 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.0/vue.js"></script> 
 
<div id='app'></div>

以下のサンプルのような構造を持っており、私はいくつかのローカル変数魔女にactions[task]を移動したいだけループに見えるであろう。私はVueのは、テンプレートの元部未満You may have an infinite update loopエラー

---

[EDIT]

をスロー配列内の複数のオブジェクトがある場合dataオブジェクト府に移動しようと

<tr v-for="issue in issues" :key="issue.id"> 
    <td> 
     <div>{{ issue.jiraKey }}</div> 
     <div class="issue-description"> 
      [ {{ issue.summary }} ] 
     </div> 
    </td> 
    <template v-for="variant in variants"> 
     <td v-for="browser in issue.devices[variant.key].browsers"> 
     <!-- 
      logic with `browser` and `issue.devices[variant.key]` 
     --> 
     </td> 
    </template> 
</tr> 

Answer 1

のVueすることができますiterate over an object。

<ul> 
    <li v-for="task in actions"> 
    {{ task.name }} will take {{ task.time }} 
    </li> 
</ul> 

Example。

代わりに計算された値を使用します。

computed:{ 
    actionsByTask(){ 
     return this.tasks.map(t => this.actions[t]) 
    } 
    }, 
template: ` 
    <ul> 
     <li v-for="task in actionsByTask"> 
     {{ task.name }} will take {{ task.time }} 
     </li> 
    </ul> 
    ` 

また、（ここで私はあなたの編集に基づいて少し推測している）反復するために、より良いデータ構造を構築するために計算された値を使用することができます。

computed:{ 
    modifiedIssues(){ 
     return this.issues.map(issue => { 
      issue.devicesOfInterest = this.variants.map(v => issue.devices[v.key]) 
     }) 
    } 
} 

またはそれに相当するもの。このケースでは3つのループがあり、どちらが修正された構造に追加するのが適切かわかりません。

最後に、データを渡す小さなコンポーネントを作成することができます。

Browser = { 
    props:["browser", "device"], 
    template:`... stuff that goes in a browser td ...` 
} 

とテンプレートで

<td :is="Browser" 
    v-for="browser in issue.devices[variant.key]" 
    :browser="browser" 
    :device="issue.devices[variant.key]"> 
</td> 

Answer 2

あなたが実際にいくつかの式の別名が必要な場合は、v-forを使用することができますし、

<template v-for="obj in [actions[task]]"> 

のように、表現のうちの1要素の配列を作ります

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    tasks: ['task1', 'task2', 'task3'], 
 
    actions: { 
 
     'task1': { 
 
     name: 'dig', 
 
     time: '20min' 
 
     }, 
 
     'task2': { 
 
     name: 'run', 
 
     time: '1h' 
 
     }, 
 
     'task3': { 
 
     name: 'drinking', 
 
     time: 'all night' 
 
     } 
 
    } 
 
    }, 
 
    template: ` 
 
    <ul> 
 
     <li v-for="task in tasks"> 
 
     <template v-for="obj in [actions[task]]"> 
 
      {{ obj.name }} will take {{ obj.time }} 
 
     </template> 
 
     </li> 
 
    </ul> 
 
    ` 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.6/vue.min.js"></script> 
 
<div id="app"> 
 
</div>