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

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

或者那种效果。在这种情况下你有三个循环，我不确定哪一个适合添加到修改后的结构中。

最后，您可以构建一个将数据传递给的小组件。

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

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>

具有局部变量

2 个答案: