Magento 2 in minicart popup need qty incrementer and decrementer

Question

I want to display qty incrementer and decrementer button in minicart popup.

I refer this link. Place below code in minicart.js but it is not working

decreaseQty: function() {
            var newQty = this.qty() - 1;
            if (newQty < 1) {
                newQty = 1;
            }
            this.qty(newQty);
        },

        increaseQty: function() {
            var newQty = this.qty() + 1;
            this.qty(newQty);
        }

Also I have added below code in app/design/frontend/Vendor/Theme/Magento_Checkout/template/minicart/item/default.html

<button data-bind="click: decreaseQty">-</button>

it shows error in console unable to proceed binding

can anyone help me how to make it work. Thanks!

Answer 1

Make sure you have proper right data-bind scope name

<script type="text/x-magento-init">
{
    "*": {
        "Magento_Ui/js/core/app": {
            "components": {
                "qty_change": { <= this is scope data-bind
                    "component": "Vnecoms_Demo/js/view/product/view/qty_change",
                    "defaultQty": <?php echo $block->getProductDefaultQty() * 1 ?>
                }
             }
        }
    }
}

Magento will get component coresponding to scope inside "components": { "scope" : {//do something here}}

<div class="control field qty" data-bind="scope: 'qty_change'">

        <button data-bind="click: decreaseQty">-</button>

        <input  data-bind="value: qty()"
                type="number"
                name="qty"
                id="qty"
                maxlength="12"
                title="<?php /* @escapeNotVerified */ echo __('Qty') ?>" class="input-text qty"
                data-validate="<?php echo $block->escapeHtml(json_encode($block->getQuantityValidators())) ?>"
        />

        <button data-bind="click: increaseQty">+</button>
    </div>