条件组件变量值递增Vue/Laravel

Question

[1]所以我有一个 laravel 项目正在进行，我想增加变量 Deliver_later_num 的值，这取决于我输出的 items[] 数组中同一组件中存在的“deliver_today”模板文件，我不知道该怎么做，我不知道我是否可以在模板端或组件端增加值。这是组件代码：

 cartContent = new Vue({
        el: '#cartList',
        data: {
            items: [], //array containing all the items
            deliver_later_num: 0, //value to increment 
        },
        methods: {
            remove: function (product_id) {
                removeProductIfFromCart(product_id);
            },
            incQuantity: function (product_id){
                incCart(product_id)
            },
            decQuantity: function (product_id){
                decCart(product_id)
            },
           
        }
    })

这是模板文件：

<div id="cartList">
                <div v-for="item in items" class="items col-xs-12 col-sm-12 col-md-12 col-lg-12 clearfix">
                    <div class="info-block block-info clearfix" v-cloak>
                        <div class="square-box pull-left">
                            <img :src="item.attributes.image"  class="productImage" width="100" height="105" alt="">
                        </div>
                        <h6 class="product-item_title">@{{ item.name }}</h6>
                        <p class="product-item_quantity">@{{ item.quantity }} x @{{ item.attributes.friendly_price }}</p>
                        <ul class="pagination">
                            <li class="page-item">
                                <button v-on:click="decQuantity(item.id)" :value="item.id" class="page-link" tabindex="-1">
                                    <i class="fa fa-minus"></i>
                                </button>
                            </li>
                            <li class="page-item">
                                <button v-on:click="incQuantity(item.id)" :value="item.id" class="page-link" >
                                    <i class="fa fa-plus"></i>
                                </button>
                            </li>

                            <li class="page-item">
                                <button v-on:click="remove(item.id)"  :value="item.id" class="page-link" >
                                    <i class="fa fa-trash"></i>
                                </button>
                            </li>

                            <input hidden  class="delivers_today_state" type="text" :value=" item.attributes.delivers_today "> // if this equals 0 i want to increment the deliver_later_num value
                       

                        </ul>
                   </div>
                </div>
            </div>

laravel 控制器代码：

  public function add(Request $request){
    $item = Items::find($request->id);
    $restID=$item->category->restorant->id;

    //Check if added item is from the same restorant as previus items in cart
    $canAdd = false;
    if(Cart::getContent()->isEmpty()){
        $canAdd = true;
    }else{
        $canAdd = true;
        foreach (Cart::getContent() as $key => $cartItem) {
            if($cartItem->attributes->restorant_id."" != $restID.""){
                $canAdd = false;
                break;
            }
        }
    }

    //TODO - check if cart contains, if so, check if restorant is same as pervious one

   // Cart::clear();
    if($item && $canAdd){

        //are there any extras
        $cartItemPrice=$item->price;
        $cartItemName=$item->name;
        $theElement="";

        //Is there a varaint
        //variantID
        if($request->variantID){
            //Get the variant
            $variant=Variants::findOrFail($request->variantID);

            $cartItemPrice=$variant->price;
            $cartItemName=$item->name." ".$variant->optionsList;
            //$theElement.=$value." -- ".$item->extras()->findOrFail($value)->name."  --> ". $cartItemPrice." ->- ";
        }


        foreach ($request->extras as $key => $value) {

            $cartItemName.="\n+ ".$item->extras()->findOrFail($value)->name;
            $cartItemPrice+=$item->extras()->findOrFail($value)->price;
            $theElement.=$value." -- ".$item->extras()->findOrFail($value)->name."  --> ". $cartItemPrice." ->- ";
        }


        Cart::add((new \DateTime())->getTimestamp(), $cartItemName, $cartItemPrice, $request->quantity, array('id'=>$item->id,'variant'=>$request->variantID, 'extras'=>$request->extras,'restorant_id'=>$restID,'image'=>$item->icon,'friendly_price'=>  Money($cartItemPrice, env('CASHIER_CURRENCY','usd'),true)->format(),'delivers_today' => $item->deliverstoday ));


        return response()->json([
            'status' => true,
            'errMsg' => $theElement
        ]);
    }else{
        return response()->json([
            'status' => false,
            'errMsg' => __("You can't add items from other restaurant!")
        ]);
        //], 401);
    }
}

public function getContent(){
    //Cart::clear();
    return response()->json([
        'data' => Cart::getContent(),
        'total' => Cart::getSubTotal(),
        'status' => true,
        'errMsg' => ''
    ]);
}

链接到项目数组 vue 开发工具截图 [1]：https://i.stack.imgur.com/smLRV.png

感谢您宝贵的帮助和时间。

Answer 1

如果deliver_later_num 仅依赖于items 数组元素上deliver_today 的存在/不存在，则可以使用计算属性

 cartContent = new Vue({
    el: '#cartList',
    data: {
        items: {}
    },

    computed: {
        deliver_later_num() {
            let num = 0;
            Object.keys(this.items).forEach(key => {
                let item = this.items[key];
                Object.keys(item).forEach(k => {
                    if(k === 'deliver_today' && item[k]) {
                        num++;
                    }
                });
            });

            return num;
         },
    }