时间戳

首页 > 解决方案 > v-for on check中的v-checkbox选中保存到数据vue

vue.js - v-for on check中的v-checkbox选中保存到数据vue

问题描述

我在v-for中创建v-checkbox，我想要的是当它被选中保存到数据数组时，当从数组中取消选中未设置时是我的代码

<v-row v-for="basket in baskets" :key="basket.id">
    <v-col>
        <v-card
        >
          <div class="d-flex justify-space-between">
            <p><span class="text-bold ml-2">{{basket.name}} </span>  
              <span class="text-small ml-2">{{basket.description}}</span>
            </p>
            <v-checkbox
              v-model="basket.make_order" @change="check_Basket(basket)"
            ></v-checkbox>
          </div>
          <div class="d-flex justify-space-between">
            <p> <span class="text-small ml-2">price :</span> {{basket.price}}</p> 
            <p class="mr-2"> <span class="text-small">total :</span> {{basket.qty}} {{basket.unit}}</p>
          </div>
          <div class="d-flex justify-space-between">
            <p> <span class="text-small ml-2">Total :</span> {{basket.total}}</p> 
            <p class="mr-2"> <span class="text-small">from :</span> {{basket.store_name}}</p>
          </div>      
        </v-card>
    </v-col>      
</v-row>

<v-row>
    <v-btn 
    @click="make_Order"
    class="primary">make order</v-btn>
</v-row>

这是我的脚本

data () {
      return {
        baskets:[],
        checked:[],
      }
    },
    methods:{
      check_Basket(value){
        this.checked.push(value.id)
        console.log(this.checked)
      },
      make_Order()
        console.log(this.checked)
      }
    }

请注意，我在数组篮子中有正确的数据，

标签： vue.jsvuetify.js

解决方案

哦，我得到了答案，您需要在 basket.checked 下建模并在保存按钮中进行条件检查，如果选中 == true，则可以将其发布到后端

 <v-checkbox
   v-model="basket.checkbox"
 ></v-checkbox>

这是脚本

make_Order(){
        this.baskets.forEach((e)=>{
          if(e.checkbox == true){
            this.selected.push(e);
          }
        });

        console.log(this.selected);
      }

推荐阅读