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

问题描述 投票:0回答:1

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

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>

这是我的this.products的console.logenter image description here

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

javascript vuejs2 vuetify.js
1个回答
0
投票

两个建议:

  1. 将ProductListItem中的product属性的默认值作为函数返回对象
  2. product prop的默认值应包含success prop
© www.soinside.com 2019 - 2024. All rights reserved.