小程序中如何处理这种情况？

Question

需求：当用户点击不同的按钮时，按钮的颜色发生变动。（需要点击点击多个，每点击一个变一个。最要也要获取点击的id值）
思路：在渲染数据时，绑定一个标志位tag
wxml:
<block wx:for='{{type_list}}'>

      <view bindtap='getTypeId' 
      data-listid='{{item.id}}' 
      data-itemall = '{{item}}'
      class='{{item.tag == 1 ? " " : "active-sty"}}' >{{item.type}}</view>
    </block>
    

js:
//选择类型数据
getTypeId:function(e){

let _this = this;
let _id = parseInt(e.currentTarget.dataset.itemall.id);
console.log(typeof _id,)
_this.setData({
  'type_list[_id].tag' : 2
});

},

这种情况下会报错。

感觉小程序的实现与vue不太一样。
问题：如何实现这种需求？

Answer 1

试试直接用css伪类改变颜色

<input class="btn" type="button" value="btn">

<style>
.btn:hover {
    background: yellow;
}
.btn:active {
    background: red;
}
</style>

Answer 2

• 给每个按钮一个唯一标识符，data-index或者其他自定义
• 给每个按钮绑定事件，获取到按钮唯一标识符
• 更新activeIndex当前选中值
• 对比按钮标识符与activeIndex，相等则给active类

代码

<view class="row">
  <button wx:for="{{btnArr}}" class="{{activeIndex===index?'active':''}}" data-index="{{index}}" bindtap='choose'>{{item.btnName}}</button>
</view>
<view>你现在选择的是按钮是</view>
<view>{{btnArr[activeIndex].btnName}}</view>
<view>id:{{btnArr[activeIndex].btnId}}</view>

const app = getApp()

Page({
  data: {
    btnArr: [
      {
        btnName: '自助立案',
        btnId: '1'
      },
      {
        btnName: '自助查询',
        btnId: '2'
      },
      {
        btnName: '自助阅卷',
        btnId: '3'
      },
      {
        btnName: '庭审播放',
        btnId: '4'
      }
    ],
    activeIndex:null,
  },
  choose:function(e){
    this.setData({
      activeIndex:e.currentTarget.dataset.index
    })
  },
  onLoad: function () {
   
  }
})

data中的btnId主要是为数据交互做铺垫，向后台告知选中了那个按钮，data实际数据以后台给出的数据接口为准。

效果图