Vue.js 2.4中v-for渲染动态元素异常问题求助

你遇到的核心问题是内层v-for遍历的是字符串type.slug，而非对应的数据数组，这才导致了异常的渲染结果。让我具体拆解一下：

你的types数组里的slug是字符串值（比如'backLogs'），当你写<li v-for="item in type.slug">时，Vue会把这个字符串当成可遍历对象，逐个遍历它的每个字符——哪怕控制台里你的目标数组只有3个元素，也会渲染出和字符串长度一致的<li>标签。

两种可行的解决方法 #

方法1：模板中通过$data直接访问对应数组

Vue模板里可以用$data直接调用实例的data对象，只需要把内层v-for的遍历目标改成$data[type.slug]，就能根据slug的字符串值取到data里对应的数组：

<div v-for="type in types" class="nits-agile-task">
  <li v-for="item in $data[type.slug]" :class="color(item.priority)">...</li>
</div>

方法2：用计算属性预处理types数组（更推荐，逻辑更清晰）

你可以创建一个计算属性，把types里的slug替换成对应的数组引用，让模板代码更简洁直观：

computed: {
  taskTypes() {
    return this.types.map(type => ({
      ...type,
      tasks: this[type.slug]
    }))
  }
}

然后模板里直接遍历预处理后的数组：

<div v-for="type in taskTypes" class="nits-agile-task">
  <li v-for="item in type.tasks" :class="color(item.priority)">...</li>
</div>

额外的优化建议 #

1. 初始化data时，把空字符串改成空数组[]，避免初始渲染时因值为字符串触发的遍历问题：

data() { 
  return { 
    backLogs: [], 
    open: [], 
    inProgress: [], 
    done: [], 
    accepted: [], 
    sent: [], 
  } 
}

2. 多个axios请求可以用Promise.all统一处理，减少重复代码：

beforeCreate() {
  const taskEndpoints = [
    { slug: 'backLogs', url: 'api/to-do/back-logs' },
    { slug: 'open', url: 'api/to-do/open' },
    // 补充其他任务状态的接口地址
  ]
  
  Promise.all(taskEndpoints.map(item => 
    axios.get(item.url, { headers: getHeader() })
      .then(res => res.status === 200 ? { slug: item.slug, tasks: res.data.tasks } : null)
  )).then(results => {
    results.forEach(result => {
      if (result) this[result.slug] = result.tasks
    })
  })
}

内容的提问来源于stack exchange，提问作者Nitish Kumar