页面重载时Vue的v-if指令未执行，购物车状态不渲染

使用嵌套v-for循环渲染产品分类及对应产品，添加商品到购物车或收藏夹时，v-if指令能正常显示“prod in cart”提示；但页面重载后，即使购物车包含对应商品，v-if指令也未执行，无法显示该提示。

相关代码 #

产品列表渲染代码 #

<div class="single-category" v-for="category in products" :key="category.id">
    <h3>{{ category.name }}</h3>
    <hr>
    <ul>
        <li v-for="product in category.products" :key="product.id">
            <div class="product-card">
                <div class="header" style="background: url('http://via.placeholder.com/512x512');"></div>
                <div class="content">
                    <h5>{{ product.name }}</h5>
                    <p v-if="cart.includes(product)">prod in cart</p>
                </div>
                <div class="footer">
                    <button @click="productManager(product, 'cart')">➕</button>
                    <button @click="productManager(product, 'fav')">♥️</button>
                </div>
            </div>
        </li>
    </ul>
</div>

从localStorage获取购物车的函数 #

checkLocalStorageCart(){
    let localCart = localStorage.getItem('cart')
    if (localCart !== null){
        this.localStorageCart = JSON.parse(localCart)
    } else {
        localStorage.setItem('cart',  JSON.stringify([]))
    }
}

Products组件引用 #

<products
    :cart="localStorageCart"
    :fav="localStorageFav"
    :products="products"
    @productManager="productManager"
></products>

解决方案 #

1. 问题核心原因 #

从localStorage读取的商品是JSON.parse生成的新对象，和原products数组中的产品对象不是同一个引用。Array.includes()方法基于严格相等（===）判断，因此会返回false，导致v-if不生效。

2. 最优解决方案：通过商品ID判断 #

将v-if的判断逻辑改为对比商品ID，而非直接对比对象引用，这是最可靠的方式：

<p v-if="cart.some(item => item.id === product.id)">prod in cart</p>

Array.some()会遍历购物车数组，只要存在ID匹配的商品就返回true，不受对象引用影响。

3. 备选方案：同步对象引用 #

如果必须依赖对象引用判断，可以在从localStorage读取购物车后，将其中的商品替换为原products数组中的对应对象：

checkLocalStorageCart() {
    let localCart = localStorage.getItem('cart')
    if (localCart !== null) {
        const parsedCart = JSON.parse(localCart)
        // 遍历购物车商品，替换为原products数组中的对应对象
        this.localStorageCart = parsedCart.map(cartItem => {
            for (const category of this.products) {
                const matchedProduct = category.products.find(p => p.id === cartItem.id)
                if (matchedProduct) return matchedProduct
            }
            return cartItem // 找不到匹配时保留原对象（可选）
        })
    } else {
        localStorage.setItem('cart', JSON.stringify([]))
    }
}

注意：此方法需要确保products数据已经完全加载后再执行checkLocalStorageCart，否则无法找到对应商品对象。

4. 补充：购物车更新逻辑校验 #

确保productManager方法中，存储到localStorage的商品包含唯一ID，示例逻辑如下：

productManager(product, type) {
    if (type === 'cart') {
        const existingIndex = this.localStorageCart.findIndex(item => item.id === product.id)
        if (existingIndex === -1) {
            this.localStorageCart.push(product)
        } else {
            this.localStorageCart.splice(existingIndex, 1)
        }
        localStorage.setItem('cart', JSON.stringify(this.localStorageCart))
    }
    // 收藏夹逻辑同理
}

内容的提问来源于stack exchange，提问作者Andrew