How to re init stepper on VDOM change

[pps]

The template is rendering using V-DOM. A toggle is manipulating the state. works.

Code

<template>
<!-- <div class="page-content">
TOGGLE HERE. WORKS. CHANGES STATE AND DOM UPDATES :) -->
{{#unless isSigned}}
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">Quantity(bags)</div>
              <div class="item-after">
                <div class="stepper">
                  <div class="stepper-button-minus"></div>
                  <div class="stepper-input-wrap">
                    <input type="text" name="NoOfBags" readonly value="0" />
                  </div>
                  <div class="stepper-button-plus"></div>
                </div>
              </div>
            </div>
          </li>          
          {{else}}
          {{/unless}}
<!-- </div>-->

import {Component} from 'framework7'
export default class extends Component{
    data(){
        return{
        isSigned : false
    }
    }
    mounted(){
    var signedToggle = app.toggle.create({
        el: "#toggle-signed",
        on: {
          change: function (e) {
            self.$update();
            self.$tick(function () {
              self.$setState({ isSigned: !self.isSigned });
            });
          },
        },
      });

        var bagStepper = app.stepper.create({
            el: ".stepper",
            max: 10000,
            min: 0,
            autorepeat: true,
          });
    }
}

Stepper works at first, and later do not after state change, how to re init it ?

[Tim]

Move you init code inside the change handler, directly below the $setState

@pps

var bagStepper = app.stepper.create...

[pps]

• Thanks to response

• your method required little change

  • inside on:change of toggle
    a. self.$setState({_update_state_})
    b. self.$tick(function(){init stepper here})

[Tim]

That’s right, forgot about that

You can as well add it as a second argument to $setState: