Vue组件中嵌套v-for循环的数据访问问题求助

你的问题主要出在同一个元素绑定多个v-for指令（Vue不支持这种写法），以及遍历层级逻辑和组件模板结构的问题上。下面一步步帮你修正：

1. 先明确数据结构 #

你的results是一个对象，每个键对应一个数组，数组里是同一设备的多条服务记录。所以我们需要先遍历这个对象的键值对，再遍历每个数组里的记录。

2. 修正组件与模板 #

方案一：子组件渲染表格行，父组件管理表格结构 #

首先重新定义子组件，让它负责渲染单条记录的表格行：

Vue.component('service-row', {
  props: ['record'],
  template: '<tr><td>{{ record.eqname }}</td><td>{{ record.serviceTime }}</td></tr>'
})

new Vue({
  el: '#mydemo1',
  data: {
    "results": {
      "4": [
        {
          "service": 4,
          "serviceTime": "2018-02-01 10:00:00",
          "usrname": "chris job",
          "eqname": "mill saw",
          "quantity": "3.00",
          "rate": "20.00",
          "total": "60.00",
          "note": ""
        },
        {
          "service": 4,
          "serviceTime": "2018-02-04 10:00:00",
          "usrname": "chris job",
          "eqname": "mill saw",
          "quantity": "3.00",
          "rate": "20.00",
          "total": "0.00",
          "note": null
        }
      ],
      "34": [
        {
          "service": 34,
          "serviceTime": "2018-02-06 12:30:00",
          "usrname": "chris job",
          "eqname": "jack hammer",
          "quantity": "0.00",
          "rate": "20.00",
          "total": "0.00",
          "note": "Training"
        }
      ]
    }
  }
})

然后修改HTML，在父组件里遍历设备组，生成每个设备的表格，并调用子组件渲染行：

<div id="mydemo1">
  <!-- 遍历results的每个设备记录数组 -->
  <div v-for="(records, key) in results" :key="key">
    <table border="1">
      <thead>
        <tr>
          <th>设备名称</th>
          <th>服务时间</th>
        </tr>
      </thead>
      <tbody>
        <!-- 遍历单条记录，传递给子组件 -->
        <service-row 
          v-for="record in records" 
          :key="record.serviceTime" 
          :record="record"
        ></service-row>
      </tbody>
    </table>
    <br> <!-- 分隔不同设备的表格 -->
  </div>
</div>

方案二：子组件渲染完整设备表格 #

如果想让子组件负责整个设备的表格结构，父组件只需要传递记录数组即可：

Vue.component('services-table', {
  props: ['records'],
  template: `
    <table border="1">
      <thead>
        <tr>
          <th>设备名称</th>
          <th>服务时间</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in records" :key="record.serviceTime">
          <td>{{ record.eqname }}</td>
          <td>{{ record.serviceTime }}</td>
        </tr>
      </tbody>
    </table>
  `
})

// Vue实例部分和之前一致，省略

父组件HTML更简洁：

<div id="mydemo1">
  <services-table 
    v-for="(records, key) in results" 
    :key="key" 
    :records="records"
  ></services-table>
  <br>
</div>

3. 优化：设备名称首字母大写 #

如果需要和你期望的输出一致（首字母大写），可以添加一个Vue过滤器来格式化文本：

// 在Vue实例前添加过滤器
Vue.filter('capitalize', function(value) {
  if (!value) return ''
  return value.split(' ')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
})

然后在模板里使用过滤器：

<!-- 比如方案一的子组件模板修改为 -->
<td>{{ record.eqname | capitalize }}</td>

关键错误总结 #

• 同一个DOM元素不能绑定多个v-for，Vue会忽略重复指令，这是你之前无法正确渲染的核心原因。
• 必须给每个v-for元素添加:key属性，这是Vue的性能优化要求，也能避免渲染错误。
• 组件模板需要匹配你期望的输出结构，之前的模板只渲染了serviceTime，无法生成表格的完整结构。

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