凡人码农 2024-04-25 11:30 采纳率: 60%
浏览 6
已结题

vue2 checkbox问题

vue 前端 product能正常显示,里面的数据也没问题,但是为什么输出数组selectedGoodIds是空的

你的复选框使用了v-model="selectedGoodIds",这意味着当你选中或取消选中复选框时,selectedGoodIds数组应该相应地更新。


<template>  
  <div class="shoppingCart">  
 <div id="goods_container" class="goods-container">  

    <div v-for="(product,index) in products" :key="product.id" class="product-item">   
        <el-checkbox 
        v-model="selectedGoodIds"   
          :value="product.goodId" 
          @change="s"
        ></el-checkbox>
        <img :src="product.image" :alt="product.name">  
        <h3>{{product.name}}</h3>
      <div id="selectNumber" class="info" style="line-height: 100px;">
         <el-input-number 
          v-model="products[index].number" :key="index"  :min="1" 
          :max="product.goodsNumber" label="描述文字"></el-input-number>
      </div>
       <h2 >{{(product.price*product.number).toFixed(2)}}</h2>
        
    </div>
    <el-button type="primary" @click="paid">确认支付</el-button>
      <el-button type="danger" @click="dele">删除</el-button>
          
  </div>

   
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      products:[],
         selectedGoodIds:[],
  
    };  
  },  
  
    created(){
        const userId=localStorage.getItem('userId')
        console.log(userId)
        this.$axios.get(`http://localhost:8080/good/shoppingCart/${userId}`).then((res=>{
            if(res.data.code===1){
                this.products=res.data.data;
            }else{
                this.$alert("出错了")
            }
        }))

       },
      
    


  methods:{
    paid(){
      const userId=localStorage.getItem('userId')
     console.log(userId+"userId")
     console.log(this.selectedGoodIds)
    },
    dele(){

    },
    s(){
        console.log(this.selectedGoodIds[0])
    }
  }



}; 

  • 写回答

5条回答 默认 最新

  • 凡人码农 2024-04-25 13:19
    关注

    img


    用label就行了

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题?

问题事件

  • 系统已结题 5月26日
  • 已采纳回答 5月18日
  • 创建了问题 4月25日

悬赏问题

  • ¥15 ul做导航栏格式不对怎么改?
  • ¥20 用户端如何上传图片到服务器和数据库里
  • ¥15 现在研究生在烦开题,看了一些文献,但不知道自己要做什么,求指导。
  • ¥15 vivado封装时总是显示缺少一个dcp文件
  • ¥100 pxe uefi启动 tinycore
  • ¥15 我pycharm运行jupyter时出现Jupyter server process exited with code 1,然后打开cmd显示如下
  • ¥15 可否使用carsim-simulink进行四轮独立转向汽车的联合仿真,实现四轮独立转向汽车原地旋转、斜向形式、横移等动作,如果可以的话在carsim中如何进行相应设置
  • ¥15 Caché 2016 在Java环境通过jdbc 执行sql报Parameter list mismatch错误,但是同样的sql使用连接工具可以查询出数据
  • ¥15 疾病的获得与年龄是否有关
  • ¥15 opencv.js内存,CPU飙升