iview Radio绑定点击事件

说明：做一个风险问卷调查，topicsData为一个存放题目的数组， contentData存放的是每个题目对应的选项，存放格式如下：


代码：

<Card  v-for="(item, index) in topicsData" :key="index">
      <div >
         <h5 >{{index+1}}.{{item}}</h5>
         <!-- 加上:label="index1"才实现了radio的单选功能，并且是在radio中进行v-for，而不是radiogroup -->
		 <RadioGroup  vertical>
				<Radio v-for="(item1, index1) in contentData[index]"  :key="index1" :label="index1" >
					<Icon type="social-apple"></Icon>
					<span>{{contentData[index][index1]}}</span>
				</Radio>
		</RadioGroup>
	  </div> 
</Card>

---

需求： 现需要根据选择的每个选项，返回选项的的得分数组，已经设置每个选项的得分为1，2，3，4（递增）， 例如返回十个问题的选择数组为[1,3,1,4,2,3,2,4,1,1]。

所以需要给每组radio添加点击事件，看iview文档有自带的on-change函数，但是我在radio中添加这个函数没有什么反应。那我想到给iview Radio 组件的时候点击绑定一个@click事件，但是也不会有任何效果，百度得：这是因为vue的事件处理是监听的DOM事件，而iView内的组件不属于DOM。用以下代码解释下为什么。

父组件代码：

子组件Child代码：

浏览器展示，点击父组件会打印出内容，子组件不会有反应：

这是因为当在组件的标签上去监听click事件，默认的话会去监听一个叫click的自定义事件，而该子组件里没有$emit(‘click’)自定义事件，所以在父组件里面是监听不到自定义事件。

解决办法1：此时我们想使用的是个原生的click函数，所以可以使用.native 修饰符
若在组件的标签上去监听原生事件的话，需要加上.native 修饰符
若在普通的标签，则可以直接监听它的原生事件
既然 Radio 不支持click，那就想办法在能让元素响应 click

---

解决办法2：既然 Radio 不支持click，那就想办法在能让元素响应 click。在Radio外包裹一层标签: div/span，可以在外标签上添加点击事件，弊端是需要给 Radio增加一个包裹元素，可能还需要对元素写个样式，不要影响到原Radio 元素布局。

而此时，采用方法1 适合：

<Card  v-for="(item, index) in topicsData" :key="index">
      <div >
         <h5 >{{index+1}}.{{item}}</h5>
         <!-- 加上:label="index1"才实现了radio的单选功能，并且是在radio中进行v-for，而不是radiogroup -->
		 <RadioGroup  vertical>
				<Radio @click.native="change(index,index1)" v-for="(item1, index1) in contentData[index]"  :key="index1" :label="index1" >
					<Icon type="social-apple"></Icon>
					<span>{{contentData[index][index1]}}</span>
				</Radio>
		</RadioGroup>
	  </div> 
</Card>