javascript - 响应式 vuejs 数组不使用 v-for 显示其内容

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] = dataVue 无法使用这种直接访问来检测数组的更改，您可以在此处阅读:

https://vuejs.org/2016/02/06/common-gotchas/#Why-isn%E2%80%99t-the-DOM-updating

他们还提供了一个解决方案 - 尝试ingredientsReceipt.$set(data.name, data)