我有这个项目列表,当我按下确认按钮时我正在尝试更改 UI,但是它抛出了一个错误并且 UI 在我刷新页面之前不会更新,有人可以在这里帮助我.?
我正在使用 v-if
更改按钮,一切都取决于我从 DB 获得的状态。
confirm_Product(item) {
let index = this.order.products.findIndex(
(product) => product.product_code === item.product_code
);
this.order.products[index].status = 1
console.log((this.order.products[index].status = 1));
}
<template v-slot:item.actions="{ item }">
<v-tooltip bottom>
<template v-slot:activator="{ on, attrs }">
<v-btn
v-if="item.status === 0"
class="ma-2"
right
color="green"
dark
small
@click="confirm_Product(item)"
style="width: 8rem"
>
<v-icon medium class="mr-2" v-bind="attrs" v-on="on">
mdi-checkbox-marked-outline </v-icon
>Confirm
</v-btn>
<v-btn
v-if="item.status === 0"
class="ma-2"
right
color="red"
dark
small
@click="rejectItem(item)"
style="width: 8rem"
>
<v-icon medium class="mr-2" v-bind="attrs" v-on="on">
mdi-cancel </v-icon
>Reject
</v-btn>
<v-chip v-if="item.status === 1" color="success" outlined
>Confirmed</v-chip
>
<v-chip
v-if="item.status === 2"
color="primary"
@click="viewShippingDetails(item)"
link
outlined
pill
>View Shipping details
<v-icon right> mdi-arrow-right </v-icon>
</v-chip>
</template>
</v-tooltip>
</template>
答案 0 :(得分:0)
将 v-if
更改为 v-show
看起来现在可以正常工作了。