vue中radio根据动态值绑定checked无效怎么办

2023-06-29 18:06:26 556人浏览薄情痞子

摘要

这篇文章主要介绍Vue中radio根据动态值绑定checked无效怎么办，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！1.问题分析在vue之前，我们想要获取某一组（设置相同的name属性）radio的选中状态是通过n

这篇文章主要介绍Vue中radio根据动态值绑定checked无效怎么办，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

1.问题分析

在vue之前，我们想要获取某一组（设置相同的name属性）radio的选中状态是通过name属性获取，判断input的checked是true还是false，但是当列表中有多组（动态获取）就显得很乏力；vue出现后我们可以通过v-model很巧妙的完成。

2.vue中分析（完成代码请看后面）

<input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">

我们将name绑定COLUMN_CODE设置为同一组radio或checkbox；v-model绑定返回的值ISSELECT（true/false），value=‘true’表示当ISSELECT的值为true是该radio或checkbox就自动选中，同理，当我们选中某一项时对应的ISSELECT自动切换成true。

vue官网描述的是无需设置name，但是我在项目中测试过是通不过的，因为还是无法识别是同一组还是不同组，所以建议读者加上。

3.完成代码（该例子中input是自定义的样式）

1）JSON数据

{"THEME_STATUE": "1","back_type": null,"THEME_CODE": "1495077293228","THEME_NAME": "新款工作服样式调查问卷","POLL_TYPE_DESC": "投票问卷（选择答题）","POLL_TYPE": "B","THEME_CONTENT": "关于新款工作服样式评价的投票通知各位职工朋友：今年，公司工作服已到新一轮采购周期。为提高职工对工作服的满意度，展示职工良好形象,安全管理部与工会一同对职工的意见反馈进行了收集，并组织职工代表对新款样衣进行了初评。现请广大职工朋友根据图样展示，评选心目中最佳的春、夏和冬装棉服款式。我们将根据大家投票结果定款。安全管理部、工会2017年5月15日","ANSWER_MODE": "","POLL_MULT_NUM": "","POLL_SINGLE_NUM": "","MAX_POLL_NUM": "","POLL_SINGLE_SCORE": 0,"POLL_MULT_SCORE": 0,"BGIMG": "Http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a3D249fa8e3d72b9","SCORE_STATUS": "","SCORE_RESULT": "","CREATE_DATE": "2017-05-31","END_DATE": "2019-10-30","ISANSWER": false,"COLUMN_LIST": [{"COLUMN_CODE": "181","COLUMN_NAME": "1、您所在的工作单位","COLUMN_TYPE": "radio","COLUMN_CONTENT": "","ISSELECT": false,"OPTION_LIST": [{"OPTION_CODE": "191","OPTION_NAME": "A、厂 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "192","OPTION_NAME": "B、烟厂 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "193","OPTION_NAME": "C、湖北 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "194","OPTION_NAME": "D、中国 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "195","OPTION_NAME": "E、大大 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "196","OPTION_NAME": "F、小小","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "197","OPTION_NAME": "G、卷烟材料厂 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "198","OPTION_NAME": "H、新业薄片公司 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}]}, {"COLUMN_CODE": "142","COLUMN_NAME": "2、您所在的工作区域","COLUMN_TYPE": "radio","COLUMN_CONTENT": "","ISSELECT": false,"OPTION_LIST": [{"OPTION_CODE": "61","OPTION_NAME": "A、卷包车间 ","OPTION_HREF": "","OPTION_TYPE": "radio","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "62","OPTION_NAME": "B、制丝车间 ","OPTION_HREF": "","OPTION_TYPE": "radio","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "63","OPTION_NAME": "C、动力车间 ","OPTION_HREF": "","OPTION_TYPE": "radio","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "64","OPTION_NAME": "D、仓储、物流 ","OPTION_HREF": "","OPTION_TYPE": "radio","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "65","OPTION_NAME": "E、其他 ","OPTION_HREF": "","OPTION_TYPE": "text","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}]}, {"COLUMN_CODE": "143","COLUMN_NAME": "3、您所在的工作岗位","COLUMN_TYPE": "radio","COLUMN_CONTENT": "","ISSELECT": false,"OPTION_LIST": [{"OPTION_CODE": "66","OPTION_NAME": "A、操作工 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "67","OPTION_NAME": "B、维修工 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "68","OPTION_NAME": "C、辅助工 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "69","OPTION_NAME": "D、管理人员 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "70","OPTION_NAME": "E、其他 ","OPTION_HREF": "","OPTION_TYPE": "text","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}]}, {"COLUMN_CODE": "144","COLUMN_NAME": "4、您心目中最佳的春、夏款式是","COLUMN_TYPE": "radio","COLUMN_CONTENT": "","ISSELECT": false,"OPTION_LIST": [{"OPTION_CODE": "71","OPTION_NAME": "A、春、夏款款式一 ","OPTION_HREF": "","OPTION_TYPE": "imagelist","OPTION_CONTENT": "","EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8f4e214b53e4cfce","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "190","OPTION_NAME": "B、春、夏款款式二","OPTION_HREF": "","OPTION_TYPE": "imagelist","OPTION_CONTENT": "","EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=927308324fa1f0fa","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "72","OPTION_NAME": "C、春、夏款款式三","OPTION_HREF": "","OPTION_TYPE": "imagelist","OPTION_CONTENT": "","EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=be74770291a746f3","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "73","OPTION_NAME": "D、春、夏款款式四","OPTION_HREF": "","OPTION_TYPE": "imagelist","OPTION_CONTENT": "","EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=8828122cb5818a04","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "74","OPTION_NAME": "E、春、夏款款式五","OPTION_HREF": "","OPTION_TYPE": "imagelist","OPTION_CONTENT": "","EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a746a3bbb7d55e3b","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "75","OPTION_NAME": "F、现发放款式","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}]}, {"COLUMN_CODE": "145","COLUMN_NAME": "5、您心目中最佳的冬装棉服款式是","COLUMN_TYPE": "radio","COLUMN_CONTENT": "","ISSELECT": false,"OPTION_LIST": [{"OPTION_CODE": "76","OPTION_NAME": "A、冬装棉服款式一 ","OPTION_HREF": "","OPTION_TYPE": "imagelist","OPTION_CONTENT": "","EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=b39968d6d0b7446e","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "77","OPTION_NAME": "B、冬装棉服款式二","OPTION_HREF": "","OPTION_TYPE": "imagelist","OPTION_CONTENT": "","EMC_URL": "http://mobile.hbtobacco.cn:8088/emc_service/ImageAttDocument?docType=1&docId=a55d3e9b0a49ae8d","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}]}, {"COLUMN_CODE": "146","COLUMN_NAME": "6、在您选中的款式中，需要改进的细节 ","COLUMN_TYPE": "radio","COLUMN_CONTENT": "","ISSELECT": false,"OPTION_LIST": [{"OPTION_CODE": "78","OPTION_NAME": "A、工牌悬挂配饰","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "79","OPTION_NAME": "B、裤装口袋","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "80","OPTION_NAME": "C、夹克口袋 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}, {"OPTION_CODE": "81","OPTION_NAME": "D、衣扣 ","OPTION_HREF": "","OPTION_TYPE": "","OPTION_CONTENT": "","EMC_URL": "","OPTION_ANSWER": "0","POLLNUM": 0,"ISSELECT": false}]}, {"COLUMN_CODE": "147","COLUMN_NAME": "7、您对选中样衣的其他建议","COLUMN_TYPE": "text","COLUMN_CONTENT": "","ISSELECT": false,"OPTION_LIST": []}],"success": "1"}

2）html代码

<div class="select-item" v-if="voteType == 'A' || voteType == 'B'" :key="index" v-for="(item, index) in detailList">    <div class="family select-item-title" :attr="item.COLUMN_CODE" v-if="item.COLUMN_TYPE == 'radio'" v-html="item.COLUMN_NAME + '（单选）'"></div>     <div class="family select-item-title" :attr="item.COLUMN_CODE" v-else-if="item.COLUMN_TYPE == 'checkbox'" v-html="item.COLUMN_NAME + '（多选）'"></div>     <div class="family select-item-title" :attr="item.COLUMN_CODE" v-else v-html="item.COLUMN_NAME"></div>     <div class="option-con" v-if="item.COLUMN_TYPE != 'text'" :key="index1" v-for="(item1, index1) in item.OPTION_LIST">       <div class="option-con-row" v-if="item1.OPTION_TYPE != 'text'">         <input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">         <div class="family option-desc">{{item1.OPTION_NAME}}</div>       </div>       <div class="text-area-con" v-else>         <div class="option-con-row">           <input :name="item.COLUMN_CODE" :type="item.COLUMN_TYPE" v-model="item1.ISSELECT" value="true" :checked="item1.ISSELECT" :disabled="isAnswer" class="tui-checkbox">           <div class="family option-desc">{{item1.OPTION_NAME}}</div>         </div>         <textarea class="text-area" rows="3" v-model="item1.OPTION_CONTENT" :readonly="isAnswer"></textarea>       </div>       <img class="option-con-img" v-if="item1.EMC_URL" :src="item1.EMC_URL">     </div>     <div class="option-con" v-if="item.COLUMN_TYPE == 'text'">       <div class="text-area-con">         <textarea class="text-area" rows="3" v-model="item.COLUMN_CONTENT" :readonly="isAnswer"></textarea>       </div>     </div>   </div>

3）CSS样式

.checkbox-list-con .mint-msgbox-message{  line-height: 20px;}.checkbox-list-con span {  position: relative;  margin-right: 15px;}.checkbox-list-con .Checkbox {  position: absolute;  visibility: hidden;}.checkbox-list-con .Checkbox+label {  position:absolute;  width: 16px;  height: 16px;  border: 1px solid #A6A6A6;  border-radius: 50%;  background-color:#ffffff;}.checkbox-list-con .Checkbox:checked+label:after {  content: "";  position: absolute;  left: 2px;  top:2px;  width: 9px;  height: 4px;  border: 2px solid #00b7ee;  border-top-color: transparent;  border-right-color: transparent;  transfORM: rotate(-45deg);  -ms-transform: rotate(-60deg);  -moz-transform: rotate(-60deg);  -WEBkit-transform: rotate(-60deg);}.checkbox-list{  display: flex;  flex-direction: row;  margin-bottom: 5px;  align-items: center;  line-height: 20px;}.checkbox-list-con{  display: flex;  flex-direction: column;  padding: 10px 20px;}.tui-checkbox:checked {  background:#1673ff}.tui-checkbox {  width:25px;  height:25px;  background-color:#ffffff;  border:solid 1px #DDDddd;  -webkit-border-radius:50%;  border-radius:50%;  font-size:0.8rem;  margin:0;  padding:0;  position:relative;  display:inline-block;  vertical-align:top;  cursor:default;  -webkit-appearance:none;  -webkit-user-select:none;  user-select:none;  -webkit-transition:background-color ease 0.1s;  transition:background-color ease 0.1s;}.tui-checkbox:checked::after {  content:'';  top:5px;  left:5px;  position:absolute;  background:transparent;  border:#fff solid 2px;  border-top:none;  border-right:none;  height:6px;  width:10px;  -moz-transform:rotate(-45deg);  -ms-transform:rotate(-45deg);  -webkit-transform:rotate(-45deg);  transform:rotate(-45deg);}.score-result{   font-size: 16px;   font-weight: 600!important;   color: #2E8B57;   width: calc(100% - 40px);   padding: 10px 20px;   line-height: 20px;   background: #ffffff; } .text-area-con{   width: 100%; } .text-area{   width: calc(100% - 10px);      padding: 5px;   outline: none;   resize: none;   font-size: 15px;   font-weight: 500;   color: #333333;   font-family: "Microsoft YaHei";   border: 1px solid #888888; } .appointment-btn {   position: relative!important;   font-size: 18px;   color: #ffffff;   text-align: center;   line-height: 44px;   height: 44px;   border-top: 1px solid #f2f2f2;   background: #366CB3;   width: calc(100% - 32px);   margin: 0px 0px 15px 16px;   border-radius: 3px;   letter-spacing: 4px; } .option-desc{   font-size: 15px;   margin-left: 20px;   width: calc(100% - 45px);   text-align: justify;   line-height: 24px; } .option-desc1{   font-size: 15px;   margin-left: 20px;   width: calc(100% - 45px);   text-align: justify;   line-height: 24px;   color: #F0686E; } .option-con-img{   width: calc(100% - 90px);   height: 140px;   margin-left: 45px; } .option-con-row{   display: flex;   align-items: center;   width: 100%;   padding: 10px 0px; } .option-con{   display: flex;   flex-direction: column;   align-items: flex-start;   width: calc(100% - 40px);   padding: 10px 20px;   border-top: 1px solid #efefef; } .select-item-title{   width: calc(100% - 40px);   padding: 10px 20px;   color: #4682B4;   text-align: justify;   font-size: 15px;   line-height: 24px; } .select-item{   display: flex;   flex-direction: column;   margin-bottom: 15px;   background: #ffffff; } .bottom-con{   display: flex;   flex-direction: column;   width: 100%;   background: #f2f2f2; } .top-four-img{   width: 16px;   height: 16px; } .top-four-title{   color: #434343;   font-size: 16px;   margin-right: 5px; } .top-four{   display: flex;   justify-content: center;   align-items: center;   background: #ffffff;   width: 100%;   padding: 15px 0px; } .top-three-content{   color: #333333;   font-size: 15px;   line-height: 28px;   text-indent:2em;   text-align: justify; } .top-three-desc{   color: #4682B4;   font-size: 15px;   line-height: 28px;   text-indent:2em; } .top-three{   width: calc(100% - 40px);   padding: 15px 20px 0px 20px;   background: #ffffff;   overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webkit-line-clamp: 3;   -webkit-box-orient: vertical; } .top-three1{   width: calc(100% - 40px);   padding: 15px 20px 15px 20px;   background: #ffffff; } .top-two-time{   width: 100%;   text-align: center;   font-size: 13px;   color: #999999;   margin-bottom: 10px; } .top-two-title{   font-size: 18px;   color: #4682B4;   text-align: center;   width: 100%;   margin-bottom: 10px;   line-height: 24px; } .top-one>img{   height: 100%;   width: 100%; } .top-two{   width: calc(100% - 40px);   background: #ffffff;   padding:0px 20px;   border-bottom: 1px solid #efefef; } .top-one{   height: 100px;   width: 100%; } .top-con{   display: flex;   flex-direction: column;   justify-content: center;   align-items: center;   width: 100%;   margin-bottom: 15px; } .wrapper {   width: 100%;   height: 100%;      overflow: auto;   background: #f2f2f2;   -webkit-overflow-scrolling: touch; } .container {   height: 100%;   background-color: #f2f2f2;   display: flex;   flex-direction: column; }