在Quasar的Vue页面中如何在v-for循环内生成升序序号

你遇到的错误是因为Vue模板表达式不允许包含有副作用的操作（比如index++这种会修改变量值的自增操作），模板只能执行纯计算的表达式。

解决方案1：直接使用index + 1 #

v-for的index从0开始，直接加1就能得到从1起始的升序序号，这是纯表达式，不会触发副作用：

<q-item clickable v-for="(i, index) in myproducts" :key="i.id">
  <q-item-section>{{ index + 1 }}</q-item-section>
  <q-item-section>{{ i.item }}</q-item-section>
  <q-item-section left>{{ i.barcode }}</q-item-section>
  <q-item-section>{{ i.unit }}</q-item-section>
  <q-item-section>
    <q-input
      v-model.number="myproducts[index].qty"
      type="number"
      style="max-width: 60px"
    />
  </q-item-section>
</q-item>

解决方案2：用计算属性给列表添加序号字段 #

如果需要更灵活的序号控制（比如序号和数据绑定、后续可能修改序号），可以提前通过计算属性给每个商品添加序号：

<template>
  <q-item clickable v-for="(item, index) in numberedProducts" :key="item.id">
    <q-item-section>{{ item.serialNumber }}</q-item-section>
    <q-item-section>{{ item.item }}</q-item-section>
    <q-item-section left>{{ item.barcode }}</q-item-section>
    <q-item-section>{{ item.unit }}</q-item-section>
    <q-item-section>
      <q-input
        v-model.number="item.qty"
        type="number"
        style="max-width: 60px"
      />
    </q-item-section>
  </q-item>
</template>

<script>
export default {
  data() {
    return {
      myproducts: [/* 你的商品数据 */]
    }
  },
  computed: {
    numberedProducts() {
      return this.myproducts.map((product, index) => ({
        ...product,
        serialNumber: index + 1
      }))
    }
  }
}
</script>

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