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

Question

我在stackowerflow上发现了类似的问题，但仍然找不到解决方案

这是我的问题，

我有一些我从 rest api 请求的数据，它是来自我的电子商务网站的货物，这批货物包含一系列物品，每个物品都包含一个产品。我在我的组件products 中创建了计算属性，我在其中映射项目并创建新的产品数组。问题是文本，在我从 rest api 获取我的产品后，我需要将此数组中的每个产品标记为已解决，但它不适用于我，看起来我的新产品数组不是响应式

这是我的代码

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>

产品列表项

<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>

这是我的this.products 的 console.log

我将产品标记为成功，但我的 ProductListItem 组件中的颜色仍然是白色

Answer 1

两个建议：

1. 将 ProductListItem 中 product 属性的默认值设为函数返回对象
2. product 属性的默认值应包含 success 属性