文章/答案/技术大牛

发布

社区首页 >问答首页 >使用Vue使用包含数组的对象填充HTML表行

问使用Vue使用包含数组的对象填充HTML表行
EN

Stack Overflow用户

提问于 2017-07-05 18:52:33

回答 1查看 3.9K关注 0票数 1

我尝试使用Vue框架填充HTML表中的行-数据如下所示：

TeamRows: [
            { team: 'One', times: ['1', '2', '3'] },
            { team: 'Two', times: ['4', '5', '6'] },
            { team: 'Three', times: ['7', '8', '9'] }
          ]

我试着使用这个codepen，但是结果不好--这是我的：

<tbody>
   <tr v-for="(row, rindex) in teamRows">
      <td>{{rindex}}</td>
         <template>
            <cell v-for="(value, vindex) in row" :value="value" :vindex="vindex" :rindex="rindex"></cell>
         </template>
   </tr>
</tbody>
</table>
<template id="template-cell">
   <td>{{ value }}</td>
</template>

这是Vue组件：

Vue.component('cell', {
    template: '#template-cell',
    name: 'row-value',
    props: ['value', 'vindex', 'rindex']
});

我希望team在一行的第一列中，times在与times一样多的列中跟随。希望有更多Vue知识的人能在这里帮助我。干杯。

html-table

vue.js

data-binding

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-07-05 20:06:37

事实证明，原因是您使用的是in-DOM模板，而浏览器将未知的cell元素移动到v-for之上，而Vue不能再访问行值：https://vuejs.org/v2/guide/components.html#DOM-Template-Parsing-Caveats

没有cell组件的解决方案，只需使用内联单元元素，就可以很好地工作。此外，在表格模板中不需要template包装器：

new Vue({
  el: '#app',
  data: {
    teamRows: [
      { team: 'One', times: ['1', '2', '3'] },
      { team: 'Two', times: ['4', '5', '6'] },
      { team: 'Three', times: ['7', '8', '9'] }
    ]
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <table>
    <tbody>
     <tr v-for="row in teamRows" :key="row.team">
       <td>{{ row.team }}</td>
       <td v-for="time in row.times">{{ time }}</td>
     </tr>
    </tbody>
  </table>
</div>

同样，作为讨论的结果，你仍然可以使用一个组件，例如，如果你将你的表包装到另一个组件中，这样浏览器就不会干扰，Vue就有机会正确地呈现所有内容：

new Vue({
  el: '#app',
  data: {
    teamRows: [
      { team: 'One', times: ['1', '2', '3'] },
      { team: 'Two', times: ['4', '5', '6'] },
      { team: 'Three', times: ['7', '8', '9'] }
    ]
  }, 
  components: {
    'mytable': {
      template: `<table>
    <tbody>
     <tr v-for="row in rows" :key="row.team">
       <td>{{ row.team }}</td>
       <cell v-for="time in row.times" :value="time" :key="time"></cell>
     </tr>
    </tbody>
  </table>`,
      props: ['rows'],
      components: {
      	'cell': {
          template: `<td>{{ value }}</td>`,
      	  props: ['value'],
        }
      }
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <mytable :rows="teamRows"></mytable>
</div>

票数 4

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/44924236

复制

相似问题

问使用Vue使用包含数组的对象填充HTML表行
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Vue使用包含数组的对象填充HTML表行EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用Vue使用包含数组的对象填充HTML表行
EN