Question

发现错误：最终，我找到了错误，在下一段中我对其进行了简要说明，因为下面的代码虽然可以解决错误，但并不是针对错误本身，而是为了更改代码的方法，确切地说是如下所述，通过将数组的索引加上自己的名称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来直接显示数组，而是在屏幕上仅显示一个空数组。如果有人知道在哪里可以找到错误，那将非常有帮助。

Answer 1

您将元素添加到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)

Answer 2

好吧，我终于设法修复了它，问题是它正在重命名数组的每个位置。为了解决这个问题，我使用了一些函数式编程，我留下了编号为数组的位置，并对其应用了(< (first (rest lst) 0)) ; ↑ ↑，并使用了获得的值。现在可以使用了，但是我将进行更多调查，以了解为什么它不适用于重命名的数组位置。

我将所做的更改保留在新代码中，我还将对必须删除的代码发表评论，以防万一有人能够找到错误，我想这就是问题所在。

.filter()

谢谢大家的帮助！

反应性vuejs数组不使用v-for

2 个答案: