я обнаружил аналогичную проблему в stackowerflow, но все еще не могу найти решение
Вот моя проблема,
У меня есть некоторые данные, которые я запрашиваю из остальных API, это отгрузка с моего электронного начала сайт, этот груз содержит массив товаров, и каждый товар содержит один товар. Я создал вычисленные свойства в моем компоненте products, где я отображаю элементы и создаю новый массив продуктов. Проблема в тексте, после того, как я получаю свои продукты из остальных 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>
А вот console.log моего this.products 
Я отметил продукты как успешные, но цвет в моем ProductListItem компоненте все еще белый