JSFiddle - React, Tailwind, and code Playground

by Vue Echarts

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<script src="https://dn-quietcoder.qbox.me/mail-question-2018-02-05.js"></script>
<div id="app">
  <div v-for="data in list.data">
    <template v-for="c in data.criterias" >
      <el-radio-group
        @change="handleRadioChange"
        v-model="form[c.code]"
        :key="c.id + 10000">
        <template v-for="l in c.levels" >
          <el-radio
            :key="l.id"
            :label="l.id">
            {{l.name}}:{{l.description}}
          </el-radio>
        </template>
      </el-radio-group>
    </template>
    </div>
</div>

SCSS

@import url("//unpkg.com/[email protected]/lib/theme-chalk/index.css");

Babel + JSX

var Main = {
  data () {
    return {
      form: {
        test: 100
      },
      list: []
    };
  },
  
  methods: {
    handleRadioChange (v) {
    	console.log(v)
    }
  },
  
	created () {
  	this.list = window.data
    
    this.list.data.forEach(d=>{
      d.criterias.forEach(c=>{
        console.log(c.code, c.value)
        if(c.value){
          this.$set(this.form, c.code, parseInt(c.value));
        }
      })
    })
  }
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')