element-ui中动态修改组件属性的值

图1

在图1中，有一个button-group，如果我们想让他保持一定的状态，即点击'3日'后，下方出现相应的图标，这个'3日'的button一直保持亮度。该如何做呢？

图2

在图2中，我们发现，element-ui给定的button type其实有很多的，只要在我们点击处罚button的事件的同时，修改button的type就行了。

方案1

在vue中，有一个很方便的dom方法，就是ref

<el-button ref="button11" size="mini" @click="choose_card1">3日</el-button>
<el-button ref="button12" size="mini" @click="choose_card2">7日</el-button>
<el-button ref="button13" size="mini" @click="choose_card3">30日</el-button>

我们给每个button一个特定的ref值。需要修改的时候，我们在这个button的时间里，给每个button的type一个特定值就行了。

choose_card1() {
     this.$refs.button11.type = 'primary'
     this.$refs.button12.type = ''
     this.$refs.button13.type = ''
}

如果，这样，我们就能观察到确实修改了button的type属性并且有效果，但是打开浏览器的console(F12)我们就会发现，出现了很多报错：

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “type”

报错的内容根据字面含义可以知道，如果我们修改这个type的话，父组件也会发生变动。这个方法并不成立。同时，报错的内容里面，给我们提供了修改的方法，就是用data或者computed来保存一个临时的属性。

方案2

HTML:

<el-button :type="button11" size="mini" @click="choose_card1">3日</el-button>
<el-button :type="button12" size="mini" @click="choose_card2">7日</el-button>
<el-button :type="button13" size="mini" @click="choose_card3">30日</el-button>

JS:

data () {
      return {
        button11: '',
        button12: '',
        button13: ''
     }
}
methods : {
  choose_card1() {
     this.button11 = 'primary'
     this.button12 = ''
     this.button13 = ''
  }
}

这样，就没有错误了。