与局部变量

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对象蒲式耳当有数组多个对象的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>