欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue2.0 饿了么报错:Avoid mutating a prop directly since the value will be overwritten whenever

程序员文章站 2024-03-11 16:32:07
...

 报错原因:

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。(父组件更新,子组件中的prop值也会更新,但子组件不能修改由父组件传递过来的值)

 解决办法:

    定义一个本地的 data 属性并将这个 prop 用作其初始值

相关代码:

 

<div class="rating-type">
  <span @click="select(2,$event)" class="block positive" :class="{'active': selectedtype === 2}">{{desc.all}}
    <span class="count">47</span>
  </span>
  <span @click="select(1,$event)" class="block positive" :class="{'active': selectedtype === 1}">{{desc.positive}}
    <span class="count">50</span>
  </span>
  <span @click="select(0,$event)" class="block negative" :class="{'active': selectedtype === 0}">{{desc.negative}}
    <span class="count">47</span>
  </span>
</div>
data() {
  return {
    selectedtype: this.selectType
  };
},
methods: {
  select(type, event) {
    if (!event._constructed) {
      return;
    }
    this.selectedtype = type;
  }
}

官方文档链接:https://cn.vuejs.org/v2/guide/components-props.html

相关标签: Vue2.0