如何在 v-for 循环中改变数组对象的状态？

Question

我正在使用 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 列表才会更新

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

Answer 1

Vue 2 无法检测以通常方式对数组中现有项目进行的更改； here's the full explanation。您需要更改此行：

this.venta[busqueda] = newObj

至：

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

（也可以用Vue.set，但splice至少还是标准的数组运算。）

如何在 v-for 循环中改变数组对象的状态？

how to alterate state in array object at v-for loop?

javascript

vue.js

linux-toolchain