iview Radio绑定点击事件

vue.js 专栏收录该内容
11 篇文章 0 订阅

说明:做一个风险问卷调查,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>
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值