Nested loop with local variable

Question

I have structure like in sample below

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>

and I would like to move actions[task] to some local variable witch will be visible only in loop. I try to move it to data object bu when there are more objects in arrays Vue throw You may have an infinite update loop error

---

[ EDIT ]

Below original part of template

<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

If you really want an alias for some expression, you can use v-for and make a one-element array out of the expression, like

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

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>

Answer 2

Vue can iterate over an object.

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

Example.

Alternatively use a computed.

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

You could also use a computed value to build a better data structure to iterate (here I'm guessing a little bit based on your edit).

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

Or something to that effect. You have three loops in this case and I'm not really sure which one is appropriate to add into the modified structure.

Finally you could build a small component that you pass the data to.

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

and in your template

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