如何更改计算属性vuejs中的数组元素

Question

i found similar problem on stackowerflow but still cant find solution

Here is my problem,

I have some data which i request from rest api, it is shipment from my e-commence site, this shipment contain array of items, and each item contain one product. I created computed properti in my component products where i map items and create new array of product. Issue is text, after i get my products from rest api, i need mark each product in this array as resolved, but it not works for me, looks like my new product array is not reactive

Here is my code

Scan.vue

<script>
    import HeadLine from '@/components/HeadLine'
    import OrderDetails from "@/components/collect/OrderDetails"
    import ProductListItem from "@/components/collect/ProductListItem"
    import {mapActions} from 'vuex'

    export default {
        components: {
            HeadLine, OrderDetails, ProductListItem
        },
        data() {
            return {
                scan: '',
                shipment: {},
                loading: null,
                success: null,
            }
        },
        computed: {
            products() {
                return this.shipment.items ? this.shipment.items.map(item => {
                    return {
                        barcode: item.product.barcode,
                        name: item.product.name,
                        sku: item.product.sku,
                        success: null
                    }
                }) : []
            },
            orderDetails() {
                return {
                    tracking_number: this.shipment.tracking_number || '',
                    order_id: this.shipment.remote_order_id || ''
                }
            }
        },
        methods: {
            ...mapActions([
                'handleError',
                'getShipmentByTracking'
            ]),
            async handleGetShipmentByTracking() {
                try {
                    this.loading = true
                    this.shipment = await this.getShipmentByTracking(this.scan)
                    this.scan = ''
                } catch (e) {
                    this.handleError(e)
                    this.scan = ''
                } finally {
                    this.loading = null
                }
            },
            handleScan() {
                // If no shipment, get it by tracking number
                if (!this.shipment.id) {
                    return this.handleGetShipmentByTracking()
                }

                //We got shipment already, start scan products by barcode
                this.products.map((el) => {
                    if (el.barcode === this.scan) {
                        el.success = true
                    }
                })
            },
            clearOrder() {
                this.shipment = {}
                this.scan = ''
            }
        },
        watch: {
            products: {
                handler(val){
                    alert('changed')
                },
                deep: true
            }
        }
    }
</script>

<template>
    <v-row align="center" justify="center">
        <v-col cols="12" md="12" sm="12" xl="12">
            <head-line text="Scan tracking numbers"/>
        </v-col>
        <v-col cols="12" md="12" sm="12">
            <v-row>
                <v-col cols="12" md="6" sm="12">
                    <v-card>
                        <v-card-title>
                            Scan Area
                        </v-card-title>
                        <v-card-text>
                            <v-text-field
                                @keyup.enter="handleScan"
                                label="Scan"
                                clearable
                                loader-height="3"
                                :loading="loading"
                                v-model="scan"
                                outlined
                            ></v-text-field>
                            <v-btn
                                block
                                color="primary"
                                @click="clearOrder"
                            >
                                Clear Order
                            </v-btn>
                        </v-card-text>
                    </v-card>
                </v-col>
                <v-col cols="12" md="6" sm="12">
                    <order-details :details="orderDetails"/>
                </v-col>
            </v-row>
        </v-col>
        <v-col cols="12" sm="12" md="12" v-if="products">
            <product-list-item v-for="(product, index) in products" :key="index" :product="product" />
        </v-col>
    </v-row>
</template>

<style scoped>

</style>

ProductListItem

<script>
    export default {
        props: {
            product: {
                type: Object,
                default: {}
            },
        },
        computed: {
            color() {
                return this.product.success ? 'green' : 'white'
            }
        }
    }
</script>

<template>
    <v-card class="m-1" :color="color">
        <v-card-title>
            {{product.name}}
        </v-card-title>
        <v-card-text class="title font-weight-black">
            <div>
                <v-icon class="mr-1">mdi-pound</v-icon>{{product.sku}}
            </div>
            <div>
                <v-icon class="mr-1">mdi-barcode</v-icon>{{product.barcode}}
            </div>
        </v-card-text>
    </v-card>
</template>

<style scoped>

</style>

And here is console.log of my this.products

I marked products as successfull but color in my ProductListItem component still white

Answer 1

Two suggestions:

1. Make a default value of the product prop in the ProductListItem as function returning object
2. The default value of the product prop should contain success prop