我在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>
我将产品标记为成功,但是ProductListItem
组件中的颜色仍然是白色
两个建议: