vue用新添加的属性的问题

问题:总有一个报错,指的是一个未声明的变量



这个属性是新建的,用来记录客户购买的数量,先引入全局vue,在用全局vue.set()方法添加属性
html

{{ count }}

js:

add(event) {// 增加数量
        if(!event._constructed){// 阻止pc端点击后执行两次
          return;
        }
        if (!this.food.count) {
          Vue.set(this.food,"count",1)
        } else {
          this.food.count++;
        }
      }

vue.set(对象,属性,初始化)
属性创建没问题,但是dom结构中需要这个count来判断列表是否渲染,而这个创建属性的方法是绑定在用户点击的按钮上,所以一开始数据里是没有这个属性的,会报错
解决方法:

export default{
    data() {
      return {
        count: 0
      }
    },
    methods:{
      add(event) {// 增加数量
        if(!event._constructed){// 阻止pc端点击后执行两次
          return;
        }
        if (!this.food.count) {
          Vue.set(this.food,"count",1)
          this.count = this.food.count;
        } else {
          this.food.count++;
          this.count =this.food.count;
        }
      }
    }   
}

在data里新建一个属性,用来初始化

你可能感兴趣的:(vue用新添加的属性的问题)