Reactive Variable in dynamic sheet modal on stepper change

Questions
1

I have stepper inside dynamic sheet modal like below:

let totalPrice = $ref(0)
let sellingPrice = $ref(1000)
let cartSheet
let stepperQuantity

const addToCartSheet = () => {

    if (!cartSheet || cartSheet.destroyed) {
        cartSheet = $f7.sheet.create({
            content: `
            <div class="category-sheet sheet-modal tw-h-auto">
                <div class="sheet-modal-inner tw-h-auto">
                    <div class="block tw-relative">
                        <small class="tw-block tw-mb-4">Add To Cart</small>
                        <div class="tw-block tw-mb-4">
                            <div class="tw-flex tw-flex-wrap">
                                <div class="tw-w-1/2">
                                    <div class="stepper stepper-raised stepper-large stepper-quantity tw-float-left">
                                        <div class="stepper-button-minus"></div>
                                        <div class="stepper-input-wrap">
                                            <input class="tw-text-black" type="text" min="1" step="1" readonly />
                                        </div>
                                        <div class="stepper-button-plus"></div>
                                    </div>
                                </div>
                                <div class="tw-w-1/2">
                                    <span class="tw-block tw-text-right tw-text-2xl tw-mt-1 tw-font-bold">${totalPrice.value}</span>
                                </div>
                            </div>
                        </div>
                        <a href="#" class="link sheet-close tw-absolute tw-top-0 tw-right-3 tw-text-gray-600"><i class="icon f7-icons size-20">xmark</i></a>
                    </div>
                </div>
            </div>
            `,
            swipeToClose: true,
            backdrop: true,
            containerEl: '[data-name="categorydetail"]',
            on: {
                opened: function (sheet) {
                    stepperQuantity = $f7.stepper.create({
                        el: '.stepper-quantity',
                        step: 1,
                        min: 1,
                        value: 1,
                        on: {
                            change: function(stepper, value) {
                                totalPrice.value = sellingPrice.value * value
                            }
                        }
                    })
                },
                closed: function (sheet) {
                    setTimeout(() => {
                        cartSheet.destroy()
                    })
                }
            }
        }).open()
    }
}

Every time the stepper value change, totalPrice value change as well as but it is not reactive. That variable inside sheet modal not updating the value

I have tried to use $update() too but still it’s not working

I use F7 v6.3.5 core

2

It will not be reactive because this stepper created dynamically and not a part of the component

3

@nolimits4web Thank you for your reply, any workaround to make it work?

I tried to use events but still it’s not working since it is not a part of the component as you said, my last resort now to use a view inside the sheet, let me try

4

Hmmm I have no luck to make it work :frowning:

5

OMG I was so zero last night, didn’t know why I made this so complicated. I only need to change that html text for the total price I dont need the reactivity at all to do it

stepperQuantity = $f7.stepper.create({
	el: '.stepper-quantity',
	min: product.min_order,
	step: 1,
	value: product.min_order,
	on: {
		change: function(stepper, value) {
			totalPrice.value = (price * value)
			const tot = $('#total-price').html(`Rp${totalPrice.value.format(0,0,'.',',')}`)
			console.log(tot)
		}
	}
})

sorry @nolimits4web it’s all my mistake