商品上下架功能实现vue3
时间: 2024-01-09 19:22:43 浏览: 37
以下是Vue3实现商品上下架功能的代码示例:
```vue
<template>
<div>
<button @click="toggleSaleStatus">{{ saleStatus === '1' ? '下架' : '上架' }}</button>
</div>
</template>
<script>
export default {
data() {
return {
saleStatus: '1', // 默认为上架状态
};
},
methods: {
toggleSaleStatus() {
const handle = this.saleStatus === '1' ? '2' : '1'; // 切换上下架状态
const handleDown = { id: row.id, handle };
// 调用接口传参
productHandleGet(handleDown).then((res) => {
console.log("上下架按钮", res);
if (res.data.code == 666) {
this.$message.success(res.data.msg);
this.productList(); // 刷新商品列表
}
});
},
},
};
</script>
```
请注意,上述代码中的`productHandleGet`函数是一个示例,你需要根据实际情况替换为你自己的接口调用函数。