【vue 项目】v-for循环写相同样式按钮、并分别对按钮进行接口调用以及禁用

实现下方效果，之前写了五个按钮，在每个按钮上加class样式、icon图标、@click点击。
后来有位大佬重新写了，感觉没有之前繁琐，在此记录一下。

按钮04 禁用状态

html

<div>
    <el-row>
      <el-col v-for="(item, index) in butList" :key="index" :span="4">
        <el-button type="text" :disabled="item.type" @click="butClick(index)">
          <i :class="item.icon"
            :style="{ background: (item.type ? '#46b2bf' : (index == butIndex ? '#46b2bf' : '#83d4dc')), color: ('#ffffff'), padding: ('12px'), 'border-radius': ('8px') }" />
          <span
            :style="{ color: (item.type ? '#46b2bf' : (index == butIndex ? '#46b2bf' : '#83d4dc')), 'margin-left': ('5px') }">{
    
    {
    
     item.text }}</span>
        </el-button>
      </el-col>
    </el-row>
  </div>

script

export default {
    
    
  data() {
    
    
    return {
    
    
      butList: [{
    
    
        icon: 'el-icon-user',
        text: '按钮01',
        type: false
      },
      {
    
    
        icon: 'el-icon-phone',
        text: '按钮02',
        type: false
      },
      {
    
    
        icon: 'el-icon-goods',
        text: '按钮03',
        type: false
      },
      {
    
    
        icon: 'el-icon-s-goods',
        text: '按钮04',
        type: false
      },
      {
    
    
        icon: 'el-icon-remove',
        text: '按钮05',
        type: false
      }
      ],
      butIndex: '-1' // 用来判断选中的按钮
    }
  },
  methods: {
    
    
    butClick(index) {
    
    
      this.butIndex = index
      if (index === 0) {
    
    
      	// index===0 则为按钮01
      	// ...
      	// 按钮01的逻辑代码 进行接口调用
      }
      if (index === 1) {
    
    
      	// index===1 则为按钮02
      	// ...
      	// 按钮02的逻辑代码 进行接口调用
      }
      ...
    }
  }
}

this.butList.forEach(item => {
    
    
// 通过更改type值改变禁用状态
	if (item.text === '按钮04') {
    
    
	   item.type = true
	 } else {
    
    
	   item.type = false
	 }
})