0

我正在使用 Nuxt 在 Vue Js 制作库存系统。我试图创建一个在库存中找到的功能，如果该项目存在于库存中，则数量增加一个。问题？该函数成功运行，但我看不到我的 V-for 列表中的更改，但如果我在我的数组中推送其他对象，则 v-for 循环将使用新数据进行更新。

<script lang="js">
    import Vue from 'vue'
    import Navbar from '../../components/Navbar'
    export default Vue.extend({
        components: {
            Navbar
        },
        data(){
            return{
                products: [
                    { name: 'abrazadera', id: 0, image: "https://carritoferretero.com/wp-content/uploads/2018/05/products-abrazadera-de-arranque-carrito-ferretero_2.png", price: 20},
                    { name: 'tuerca', id: 1, image: "https://cdn.homedepot.com.mx/productos/819576/819576-d.jpg", price: 40},
                    { name: 'martillo', id: 2, image: "https://cdn.homedepot.com.mx/productos/680442/680442-d.jpg", price: 50}
                ],
                venta: [

                ]
            }
        },
        methods: {
            addProduct(id, index){
                let busqueda = this.venta.find( item => item.id == id)
                console.log(busqueda)
                if(typeof(busqueda) == 'undefined'){
                    let newObj = this.products[index]
                    newObj.cantidad = 1
                    this.venta.push(newObj)
                } else {
                    busqueda = this.venta.findIndex( element  => element.id == id )
                    let newObj = this.venta[busqueda]
                    newObj.cantidad = this.venta[busqueda].cantidad + 1
                    this.venta[busqueda] = newObj
                }
            }
        }
    })
</script>

在我的“addProduct”功能中，如果项目不存在，我在我的“venta”库存中找到一个产品，我在我的库存中添加一个产品，否则我添加 + 1 个数量。该功能正常工作，但渲染 vfor 没有更新。仅当我使用“arrayelement.push”添加新元素时，v-for 列表才会更新

有什么想法可以解决这个问题吗？感谢您的回答

4

1 回答 1

2

Vue 2 以通常的方式无法检测到对数组中现有项目的更改；这是完整的解释。您需要更改此行：

this.venta[busqueda] = newObj

到：

this.venta.splice(busqueda, 1, newObj)

（您也可以使用Vue.set，但splice至少仍然是标准的数组操作。）

于 2021-05-29T20:23:32.127 回答