Vue 获得所选中目标的状态(checked)以及对应目标的数据，并进行相应的操作

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

一、我们现在要拿取购物车中选中商品的状态和该商品的所有数据或者id

      <ul v-if="shopList.list.length>0">
          <li class="shop-item"  v-for="(item, index) in shopList.list" :key="index">
              <!-- 图片 -->
              <div class="check_wrap" @click="selectAllBtn($event)">
                  <input class="check" :check=check name="Fruit" type="checkbox" :value=index ref="checks" />
              </div>   
              <div class="icon">
                  <span>
                      <img :src="item.img" alt=""  v-lazy="item.img">
                  </span>
              </div>
              <!-- 主要内容 -->
              <div class="content">
                  <h2>{{item.name}}</h2>
                  <div class="extra">
                      <span>UFV {{item.price}}</span>
                      <span style="text-decoration:line-through">UFV {{item.price_origin}}</span>
                  </div>
                  <div class="cartcontrol-wrapper">
                      <div class="shop_delete" @click="reduce"><img src="../../assets/images/shopCar/-@2x.png" alt=""></div>
                      <div class="shop_count"><span>{{item.count}}</span></div>
                      <div class="shop_add" @click="add"><img src="../../assets/images/shopCar/+@2x.png" alt=""></div>
                  </div>
              </div>
          </li>
      </ul>

 1、使用 ref ，给 input 标签加上一个 ref 例如

2、我们可以通过 this,$refs 操作到该标签的dom 拿到input输入框一系列数据或者状态

这里我们选择在点击清空选中商品的按钮这里触发 this.$refs 

 这里将列表中的商品状态全部打印出来 ，我们可以看一下 这三个商品的选中状态

 这时候就可以很清晰的看到，三个商品 分别0,1,2  只有第一个选中的商品的checked状态为true其他都为false，那么就可以接下来的操作了

二、我们应该怎么拿到全部呢，这时候可以循环遍历出所有的选中信息，从而拿到一个key(index.item)等等 继续操作

1、这里可以使用到 forEach 怎么使用呢，数组.forEach(element=>{}) 这里的element 就是遍历之后的多行数组，我们可以看一下

 value 就是每一个下标值 

var checkShops = checkShopList[values].checked

checkShops就是每个商品所选中的状态

可以看到，打印出了每一个状态，第一个为true 其他为false

三、这个时候就要开始拿到选中的商品的id了，也可以拿其他的，这里我通过拿id 进行清除所选的操作

1、可以进行判断商品是否被选中，如果被选中，就拿取选中的id并放入一个数组里面

checkShops 就是每个商品的选中与否的信息，

var checkShops = checkShopList[values].checked  根据下标values遍历

2、如果checkShops为true 就是为选中状态，那么我们就将这些选中的id，加入到goodsids数组中

这里使用到push()方法， 数组.push(数据)  

注意：这里的goodsids 需要在forEach方法外面定义

因为在forEach 循环内部的话，会将每一个数组都遍历出来，每个数组里面且只有一个id数组

 

这里我们可以清楚的看到 点击清楚所选的时候，选中的商品的id已经被放在了一起并且用 ，逗号隔开，这里用逗号隔开是公司项目要求需要 使用逗号隔开是使用 join(',')  数组.join(',') 

就可以进行剩下的操作，点击清除所选项目，发送请求携带id等参数完成功能。例如

可以记录并尝试。努力共勉

以上是 Vue 获得所选中目标的状态(checked)以及对应目标的数据，并进行相应的操作 的全部内容， 来源链接： utcz.com/z/377376.html

回到顶部