Vue3中v-for绑定data数据报错‘items已定义未使用’的解决咨询

核心问题分析 #

你遇到的「items已定义但未使用」提示，根源是data函数写法错误：你在data函数内部定义了items，但未将其作为返回值的一部分，导致模板无法访问到items数据，同时ESLint检测到data里的变量未被实际使用，触发提示。另外你的v-for基础写法没问题，但缺少Vue3规范要求的key属性。

具体修复步骤 #

1. 修正data函数的返回逻辑 #

data函数必须返回包含items的对象，这样模板才能访问到该数据：

data() {
  return {
    items: [
      { qty: 5, price: 25 },       
      { qty: 3, price: 88 }
    ]
  };
}

2. 完善v-for写法（添加key属性） #

Vue3中使用v-for时，建议为循环元素添加唯一key属性，避免渲染性能问题和控制台警告：

<tr v-for="(item, index) in items" :key="index">

如果后续items中的对象有唯一标识（比如id字段），优先用该标识作为key，比index更稳定。

3. 补全computed属性的逻辑 #

你的subtotalRow和total计算属性需要实现具体逻辑，才能正确计算每行小计和总和：

computed: {      
  subtotalRow() {
    // 计算每行小计：数量*单价
    return this.items.map(item => item.qty * item.price);
  },
  total() {
    // 计算总和：累加所有行小计
    return this.subtotalRow.reduce((sum, subtotal) => sum + subtotal, 0);
  } 
}

完整修复后的代码 #

<template>     
  <div id="app">     
    <table>
      <tbody>
        <tr v-for="(item, index) in items" :key="index">
          <td><input v-model.number="item.qty" size="10"></td>
          <td><input v-model.number="item.price" size="10"></td>
          <td><input v-model.number="subtotalRow[index]" readonly size="10"></td>
        </tr>
        <tr>
          <td><strong>Total</strong></td>
          <td>{{ total }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { qty: 5, price: 25 },       
        { qty: 3, price: 88 }
      ]
    };
  },
  computed: {      
    subtotalRow() {
      return this.items.map(item => item.qty * item.price);
    },
    total() {
      return this.subtotalRow.reduce((sum, subtotal) => sum + subtotal, 0);
    } 
  }   
};
</script>

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