html-table - 一循环html中的Vue表

Question

我有一个数组，其中包含鞋子的尺寸和商店中每只鞋子的数量，结构如下：

array = {
    36=>1,   
    37=>0,
    38=>5,
    39=>2
}

在我的表中，此表中的键（此处为 36、37 ...）是 TH，值是 TD。我不能在一个循环中做到这一点。我试过这样：

<table class="table">
    <tr>
        <th v-for="(quantity, key) in productSizes" :key='key'>{{key}}</th>
    </tr>

    <tr>
    <td>Here should be quantity for each size<td>
    </tr>

</table>

有没有可能一次性做到这一点？

这是它应该是什么样子的结构（有一个输入，因为有人可以改变数量）。

Answer 1

我相信正确的方法是使用模板。我没有亲自测试过代码，但这似乎是正确的方法。

在这里找到类似的例子

<tbody>
<template v-for="(quantity, key) in productSizes" :key='key'>
    <tr>
        <th>{{key}}</th>
    </tr>
    <tr>
        <td>{{key}}<td>
    </tr>
</template>
</tbody>

编辑

使用上面的示例使其与单个 v-for 循环一起工作（这次有时间测试它）。

const productSizes = {
  36: 0,
  37: 2,
  38: 1,
  39: 3,
  40: 2,
  41: 0
}

new Vue({
  el: "#app",
  data:{
    productSizes
  }
})

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

<div id="app">
  <table>
    <tbody>
      <template v-for="(quantity, key) in productSizes">
          <tr>
              <th>{{key}}</th>
          </tr>
          <tr>
          <td><input v-model="productSizes[key]" type="text"><td>
          </tr>
      </template>
    </tbody>
  </table>
</div>

Answer 2

我无法想象一种方法可以在一个循环中做到这一点，我也不认为值得付出努力。只需在相同的数据结构上循环第二次，您将始终获得匹配的列。

console.clear()

const shoeSizes = {
  36: 0,
  37: 2,
  38: 1,
  39: 3,
  40: 2,
  41: 0
}

new Vue({
  el: "#app",
  data:{
    shoeSizes
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app">
  <table>
    <tr>
      <th v-for="quantity, key in shoeSizes">{{key}}</th>
    </tr>
    <tr>
      <td v-for="quantity, key in shoeSizes">
        <input type="text" v-model="shoeSizes[key]">
      </td>
    </tr>
  </table>
</div>

假设即使有 100 种鞋码，性能影响也可以忽略不计。

编辑

好吧，我能想到一种方法，你可以在一个循环中渲染它。使用渲染功能。

console.clear()

const shoeSizes = {
  36: 0,
  37: 2,
  38: 1,
  39: 3,
  40: 2,
  41: 0
}

new Vue({
  el: "#app",
  data:{
    shoeSizes
  },
  render(h){
    let headers = [], cells = []
    // build the headers and cells
    for (let key of Object.keys(this.shoeSizes)){
      // header is easy
      headers.push(h('th', key))
      
      // build props for the input to implement v-model
      let vmodel = {
        domProps: {
          value: this.shoeSizes[key]
        },
        on: {
          input: event => {
            this.$set(this.shoeSizes, key, event.target.value) 
            this.$emit('input', event.target.value)
          }
        }
      }
      // add the vell
      cells.push(h('td', [h('input', vmodel)]))      
    }
    // render the table with headers and cells in the 
    // right places
    return h('table', [h('tr', headers), h('tr', cells)])
  }
})

<script src="https://unpkg.com/vue@2.4.2"></script>
<div id="app"></div>

此渲染函数在同一循环中构建标题和单元格，然后围绕它们渲染表格。但我想你会同意这是不必要的复杂。