关于在vue中循环生成的单选框调样式问题

在vue循环生成的单选框中，想要调整单选框的样式则需要额外添加一个label，再将input隐藏转而调整label的样式。

  input {
    display: none;
  }
  label {
    width: 10%;
    height: 100%;
    display: inline-block;
    position: relative;
    color: #999;
  }
  label:active {
    background: #eeeeee;
  }
  label:after {
    content: ""; /*必须设置*/
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 3px solid rgb(108, 98, 219);
    position: absolute;
    border-radius: 50%;
  }

  input:checked + label:after {
    background-color: rgb(108, 98, 219);
  }

<div class="div" v-for="(item, index) in sizes" :key="index">
          <div class="left">
            <input
              :id="index"
              type="radio"
              name="size"
              v-model="size"
              :value="item.goodsName"
              class="radio_type"
              @click="check(index)"
            />
            <label :for="index"></label>
            <i>{{ item.goodsName }}</i>
          </div>

使用双向绑定来达到动态改变
效果如下：