Thu May 4 10:46:00 UTC 2023 inscode

上级 cf4a0936
......@@ -2,7 +2,7 @@
<div class="app-container">
<Header title="购物车案例"></Header>
<!-- 循环渲染每个商品 -->
<Goods v-for="item in list" :key="item.id" :title="item.goods_name" :pic="item.goods_img" :state="item.goods_state"
<Goods v-for="item in list" :key="item.id" :title="item.goods_name" :thumbnail="item.goods_img" :isChecked="item.goods_state"
:id="item.id" :price="item.goods_price" :count="item.goods_count" @change-state="updateGoodState"></Goods>
<!-- 渲染底部组件 -->
<Footer :checked="allChecked" :total-amount="totalAmount" :total-count="totalCount" @change-all-state="changeAllState"></Footer>
......
......@@ -2,7 +2,7 @@
<div class="footer-container">
<!-- 左侧的全选 -->
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cbFull" :checked="isChecked" @change="toggleAllGoods"/>
<input type="checkbox" class="custom-control-input" id="cbFull" :checked="checked" @change="toggleAllGoods"/>
<label class="custom-control-label" for="cbFull">全选</label>
</div>
......@@ -20,7 +20,7 @@
<script>
export default {
props:{
isChecked:{
checked:{
default: true, // 是否全选默认为 true
type:Boolean,
},
......@@ -36,7 +36,7 @@ export default {
methods:{
// 切换所有商品的选中状态
toggleAllGoods(e){
this.$emit('changeAllGoodsState', { value: e.target.checked });
this.$emit('change-all-state', { value: e.target.checked });
},
}
}
......
......@@ -69,7 +69,7 @@ export default {
// 切换商品选中状态
toggleGoodsChecked(e) {
// 触发一个自定义事件,将商品 ID 和选中状态传递给父组件
this.$emit('changeGoodsCheckedState', { id: this.id, isChecked: e.target.checked });
this.$emit('change-state', { id: this.id, isChecked: e.target.checked });
},
},
}
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册