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])
}
}
};