带局部变量的嵌套循环

Question

我有下面示例中的结构

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]转到一些局部变量，女巫将仅在循环中可见。data当数组中有更多对象时，我尝试将其移动到对象bu Vue抛出You may have an infinite update loop错误

---

[编辑]

模板原始部分下方

<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

如果您确实想要某个表达式的别名，则可以使用v-for该表达式并从中创建一个单元素数组，例如

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

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