Vue响应式数组使用v-for无法渲染内容问题分析与解决

我帮你找到了问题的核心，咱们一步步拆解：

为什么页面渲染不出内容？ #

你把ingredientsReceipt声明成了数组，但实际操作中是在给它添加字符串键名的属性（比如this.ingredientsReceipt[data.name] = data），而不是往数组里添加元素。

Vue对数组的响应式追踪逻辑是：只关注数字索引的变化，以及push/pop/splice这类标准数组方法的调用。直接给数组挂字符串键的属性，这些属性会变成数组对象的“额外附属属性”，不属于数组的元素集合——所以数组的length还是0，v-for遍历数组自然找不到内容，哪怕你在控制台能看到这些属性（因为数组本质也是对象）。

两种解决方案 #

方案1：改用数组的正确用法（推荐，符合你最初的数组思路） #

如果想继续用数组存储，我们需要把配料对象作为数组元素添加，通过名称判断是否重复：

修改你的data和handleDrop方法如下：

<script>
// ... 其他import保持不变
export default {
  components: {Drag, Drop},
  data() {
    return {
      ingredientsReceipt: [], // 依然用数组
      // ... 其他数据保持不变
    }
  },
  methods: {
    handleDrop(data) {
      let x = event.clientX
      let y = event.clientY
      let img = document.createElement("img")
      img.setAttribute('src', data.img)
      img.setAttribute('name', data.name)
      img.style.position = 'absolute'
      img.style.width = '3.5%'
      img.style.height = '7%'
      img.style.left = x - img.offsetWidth / 2 - 50 + 'px'
      img.style.top = y - img.offsetHeight / 2 - 25 + 'px'
      img.style.zIndex = '1'
      document.querySelector('#pizza-base').appendChild(img)

      // 核心修改：查找数组中是否已有该配料
      const existingIng = this.ingredientsReceipt.find(item => item.name === data.name)
      if (existingIng) {
        existingIng.quantity++
      } else {
        // 复制一份数据，避免修改原对象（可选，看你的需求）
        const newIng = {...data}
        this.ingredientsReceipt.push(newIng)
      }

      img.addEventListener("click", () => {
        const targetIng = this.ingredientsReceipt.find(item => item.name === data.name)
        if (targetIng) {
          targetIng.quantity--
          if (targetIng.quantity <= 0) {
            // 从数组中移除该元素
            const index = this.ingredientsReceipt.indexOf(targetIng)
            this.ingredientsReceipt.splice(index, 1)
          }
        }
        img.remove()
      })
    },
  },
}
</script>

模板里的v-for可以优化得更清晰：

<ul>
  <li v-for="ingRec in ingredientsReceipt" :key="ingRec.name">
    {{ingRec.name}}: {{ingRec.quantity}}
  </li>
</ul>

方案2：改成对象存储（适配你当前的属性赋值逻辑） #

如果更习惯用名称作为键来管理配料，可以把ingredientsReceipt改成对象，同时调整v-for的写法：

1. 修改data：

data() {
  return {
    ingredientsReceipt: {}, // 改成空对象
    // ... 其他数据不变
  }
}

2. 修改handleDrop里的赋值逻辑（用this.$set确保响应式）：

// 替换原有的if-else
if (this.ingredientsReceipt[data.name]) {
  this.ingredientsReceipt[data.name].quantity++
} else {
  // 用$set确保Vue追踪到新增的对象属性
  this.$set(this.ingredientsReceipt, data.name, {...data})
}

3. 修改模板的v-for，遍历对象的键值对：

<ul>
  <li v-for="(ingRec, name) in ingredientsReceipt" :key="name">
    {{name}}: {{ingRec.quantity}}
  </li>
</ul>

点击删除的逻辑也需要调整，用this.$delete确保响应式：

img.addEventListener("click", () => {
  if (this.ingredientsReceipt[data.name].quantity > 1) {
    this.ingredientsReceipt[data.name].quantity--
  } else {
    // 用$delete确保Vue追踪到属性删除
    this.$delete(this.ingredientsReceipt, data.name)
  }
  img.remove()
})

关键注意点 #

• Vue数组的响应式只对数字索引和标准数组方法生效，不要把数组当对象用，添加非数字键的属性
• 如果用对象存储，新增或删除属性时要使用this.$set/this.$delete，确保Vue能追踪到变化，页面才会同步更新

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