发现错误: 最后我发现了错误，我在下一段中对其进行了简短的解释，因为下面的代码虽然解决了错误，但并不是为了错误本身而这样做，而是为了改变代码的方法，到底是什么下面说，通过把数组的索引加上自己的名字vue，明白那些索引是数组对象的属性，而不是数组的索引。为了按照我最初想要的方式纠正它，我应该检查数组的属性而不是索引它们。
帖子开头:
我在 HTML 列表中显示数组数据时遇到问题。
每次我将图像放在特定的 div 元素上时，如果再次拖动图像并且数组中已存在该对象，则增加数组中该对象的数量属性。问题是，当我尝试使用 v-for 在 HTML 列表中显示该数组的内容时，它的行为就像数组为空一样。我已经验证了数组不为空，我不知道还能做什么。
<template>
<div>
<div id="wrapper-ingredients">
<div id="base">
<img src="../img/base.svg" usemap="#image-map" alt="base">
<drop id="pizza-base" @drop="handleDrop">
<map name="image-map" id="image-map">
<area target="_self" alt="pizza-base" title="pizza-base"
coords="133,387,93,308,79,217,119,119,168,69,231,32,308,17,381,14,448,36,489,64,526,99,555,142,576,195,586,251,575,314,546,359,488,412,416,446,317,454,205,436"
shape="poly">
</map>
</drop>
</div>
<div id="ingredients">
<drag class="drag" :transfer-data="bellpepper">
<img src="../img/bellpepper-512.png" id="bellpepper" alt="pimiento amarillo" width="512"
height="512">
</drag>
<drag class="drag" :transfer-data="cheese">
<img src="../img/cheese-512.png" alt="queso" width="512" height="512">
</drag>
<drag class="drag" :transfer-data="corn">
<img src="../img/corn-512.png" alt="maiz" width="512" height="512">
</drag>
<drag class="drag" :transfer-data="mushroom">
<img src="../img/mushroom-512.png" alt="seta" width="512" height="512">
</drag>
<drag class="drag" :transfer-data="olive">
<img src="../img/olive-512.png" alt="oliva" width="512" height="512">
</drag>
<drag class="drag" :transfer-data="onion">
<img src="../img/onion-512.png" alt="cebolla" width="512" height="512">
</drag>
<drag class="drag" :transfer-data="pepperoni">
<img src="../img/pepperoni-512.png" alt="pepperoni" width="512" height="512">
</drag>
<drag class="drag" :transfer-data="tomato">
<img src="../img/tomato-512.png" alt="tomate" width="512" height="512">
</drag>
</div>
</div>
<div id="wrapper-ticket">
<ul>
<li v-for="ingRec in ingredientsReceipt" >{{ingRec}}</li>
</ul>
</div>
</div>
</template>
<script>
import {Ticket} from "../model/Ticket.js"
import {Bellpepper} from "../model/Bellpepper.js"
import {Cheese} from "../model/Cheese.js"
import {Corn} from "../model/Corn.js"
import {Mushroom} from "../model/Mushroom.js"
import {Olive} from "../model/Olive.js"
import {Onion} from "../model/Onion.js"
import {Pepperoni} from "../model/Pepperoni.js"
import {Tomato} from "../model/Tomato.js"
import {Drag, Drop} from 'vue-drag-drop'
export default {
components: {Drag, Drop},
data() {
return {
ingredientsReceipt: [],
bellpepper: new Bellpepper(2),
cheese: new Cheese(3),
corn: new Corn(1),
mushroom: new Mushroom(2),
olive: new Olive(3),
onion: new Onion(4),
pepperoni: new Pepperoni(5),
tomato: new Tomato(6),
ticket: new Ticket()
}
},
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)
if (this.ingredientsReceipt[data.name] !== data) {
this.ingredientsReceipt[data.name] = data
} else {
this.ingredientsReceipt[data.name].quantity++
}
img.addEventListener("click", () => {
if (this.ingredientsReceipt[data.name].quantity > 0) {
this.ingredientsReceipt[data.name].quantity--
img.remove()
} else {
img.remove()
delete this.ingredientsReceipt[data.name]
}
})
},
},
}
</script>
我尝试直接显示数组而不使用v-for，在屏幕上仅显示一个空数组。
如果有人知道在哪里可以找到错误，那将会非常有帮助。
最佳答案
您将元素添加到 this.ingredientsReceipt[data.name] = data
Vue 无法使用这种直接访问来检测数组的更改，您可以在此处阅读:
https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating
他们还提供了一个解决方案 - 尝试ingredientsReceipt.$set(data.name, data)
关于javascript - 响应式 vuejs 数组不使用 v-for 显示其内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54603385/