vue.set- 最帅程序员_vue set size-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_40222803/article/details/80897904

本文介绍了一个基于Vue的取餐柜购物车组件实现方案，包括增减数量的功能及对应的交互逻辑。通过@click.prevent指令触发事件，使用$bus.emit进行组件间通信，并利用Vue的$set方法确保数据变化的响应式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
<!-- 取餐柜 购物车组件 -->
    <div class="cartcontrol-cupboard">
    <div class="cart-decrease"  @click.prevent="decreaseCart()"><img :src="reduce" alt="" /></div>
    <div class="cart-count"  >{{items.number}}</div>
    <div class="cart-add" @click.prevent="addCart()" ><img :src="add" alt="" /></div>
    </div>
</template>

<script>
import add from "../../static/img/add.png";
import reduce from "../../static/img/reduce.png";
export default {
  name: "cartcontrol-cupboard",
  data() {
    return {
      add,
      reduce,
      number: 1,
      items: { number: 1, id: "1" }
    };
  },
  methods: {
    decreaseCart() {
      console.log("decreaseCart");
      this.$bus.emit("changeAnimate");
    },
    addCart() {
      console.log("addCart");
      this.$bus.emit("changeAnimate");
      const number = this.items.number++;
      this.$set(this.items, 0, number);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../style/mixin.scss";
.cartcontrol-cupboard {
  @include flex();
  img {
    @include size(44px, 44px);
  }
  .cart-decrease,
  .cart-add {
    padding: 20px;
  }
  .cart-count {
    @include font(26px, "#333333", "");
  }
}
</style>

vue.set

this.$set