Toggle is not working

Questions
1

Please have a look on the below code. Toggle is not working here.

<template>
    <div class="page">
  <div class="navbar">
    <div class="navbar-inner sliding">
      <div class="title">Toggle</div>
    </div>
  </div>
  <div class="page-content">
    <div class="block-title">Super Heroes</div>
    <div class="list simple-list">
      <ul>
        <li>
          <span>Batman</span>
          <label class="toggle toggle-init" id="toggle_slide">
            <input type="checkbox">
            <span class="toggle-icon"></span>
          </label>
        </li>
      </ul>
    </div>
  </div>
</div>

</template>

<script>
    return {
        on: {
            pageInit: function(page) {
                console.log(page)
                var toggle = this.$app.toggle.create({
                    el: '#toggle_slide',
                    on: {
                        change: function() {
                            console.log('not working');
                        }
                    }
                });

                // Below line is also not working;
                console.log('>> ', toggle.checked);
            }
        }
    }
</script>

Can you please tell whether I wrote correct or wrong?

2

According to your code you tries to init toggle twice, once with toggle-init class, another one with app.toggle.create, use something one

3

I removed inline class “toggle-init” still it is not working.

4

And do you see any errors in console? It is better to illustrate the issue with JSFiddle so i can take a look