圖1
在圖1中，有一個button-group贺嫂，如果我們想讓他保持一定的狀態(tài)滓鸠，即點擊'3日'后，下方出現相應的圖標第喳，這個'3日'的button一直保持亮度糜俗。該如何做呢？
圖2
在圖2中曲饱，我們發(fā)現悠抹，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)我們就會發(fā)現，出現了很多報錯：
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的話杨何，父組件也會發(fā)生變動酱塔。這個方法并不成立。同時危虱，報錯的內容里面羊娃，給我們提供了修改的方法，就是用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 = ''
}
}
這樣蕊玷，就沒有錯誤了。
