vue数字评分

html部分

 <div
          class="list-item"
          v-for="(item, index) in invastigationList"
          :key="index"
        >
          <span class="list-item-title">{{ index + 1 }}、{{ item.title }}</span>
          <div class="vant-rate">
            <span
              class="squre"
              :class="
                item.score != '' && sindex == item.score - 1 ? 'active' : ''
              "
              v-for="(sitem, sindex) in 10"
              :key="sindex"
              @click="choseScore(index, sindex)"
              >{{ sindex + 1 }}</span
            >
          </div>
        </div>

css部分

 .vant-rate {
  width: 100%;
  display: flex;
  justify-content: left;
  background-color: #fff;
  height: 30px;
  overflow: hidden;
  line-height: 30px;
  border-radius: 6px;
}
.vant-rate span {
  flex: 1;
  text-align: center;
  color: #ca6d00;
  font-size: 14px;
}

js部分

 invastigationList: [
       
        {
          title: "投诉、建议、通知等日常事务处理",
          score: "",
          type: 1,
        },
        {
          title: "共有部位、公用设施设备的日常管理、运行维护及维修处置",
          score: "",
          type: 2,
        },
       ]

   choseScore(index, sindex) {
    
        this.invastigationList[index].score = sindex + 1;
    
      
    },