2021-10-12单选框点击可取消

最新推荐文章于 2024-05-14 19:39:01 发布

鸡汤辉

最新推荐文章于 2024-05-14 19:39:01 发布

阅读量235

点赞数

文章标签： javascript html

本文链接：https://blog.csdn.net/c327127960/article/details/120728948

版权

这篇博客介绍了在Vue.js应用中如何管理单选框的选中状态。通过在后台返回的数据中添加一个`select`字段，并利用Vue的`$set`方法动态添加到每个对象上。当点击单选框时，通过`select`函数判断并切换选中状态。该方法涉及Vue的事件处理和数据绑定，确保了单选效果的正确实现。

摘要由CSDN通过智能技术生成

一般来说渲染后台返回的数据是不会带有判断是否选中的属性

所以第一步可以在获取接口数据的同时给每一个对象添加一个可判断是否选的字段select，这里我定义select为false时是选中

 res.rows.forEach((item) => {
            //动态向list中每个对象添加select属性 true则是未选中图片显示
            this.$set(item, "select", true);
          });

然后给每一个单选框添加click事件同时传入当前的index

<div class="info-top">
              <img
                src="@/assets/orderManage/icon_duoxuan@2x.png"
                alt=""
                class="select-icon"
                @click.stop="select(index)"
                v-if="item.select"
              />
              <img
                src="@/assets/orderManage/icon_selectin@2x.png"
                alt=""
                class="select-icon"
                @click.stop="select(index)"
                v-else
              />  
 </div>

下面就是select 函数

select(index) {
      if (this.list[index].select) {
        //每次点击选中框先将所有按钮置空
        this.list.forEach((item) => {
          item.select = true;
        });
        this.list[index].select = false;
      }else if(!this.list[index].select) {
        this.list[index].select = true
      }
    },