[SOLVED] Cannot read property of 'toLowerCase'

Hello team,
I am stranded with an issue that I cant seem to fix.

I have a component, It cant load because of some error that:

Capture

my route is:
{ path: '/sign_up/', componentUrl: './pages/sign-up-page.html', },

my sign-up-page.html is as follows:

<template>
          ......
          <li>
          <a class="item-link smart-select smart-select-init" data-open-in="sheet">
            <select id="gender" >
                <option value="" selected>None Selected</option>
                  <option value="Male">Male</option>
                  <option value="Female">Male</option>
                  </select>
                  <div class="item-content">
                  <div class="item-inner">
                      <div class="item-title text-color-black"><strong>CHOOSE GENDER</strong></div>
                  </div>
              </div>
          </a>
        </li>
</template>
<script>
  return {
    // Component Methods
    methods: {     

        completePatientRegistration: function () {
          var self = this;
          var app = self.$app;
          var $ = self.$;

          .....
        },
    },
    // Page Events
    on: {
      pageInit: function(e, page) {
        var self = this;
        var app = self.$app;

               //keypad
          var numpadLimited = app.keypad.create({
              inputEl: '#demo-numpad-limited',
              valueMaxLength: 10,
              dotButton: false
            });
      },

      pageBeforeRemove: function(e, page) {
        ....
      },
    }
  }
</script>

It is not working, I dont know whats wrong with smart select… realised the error comes up when I put that in the form

Add name attribute to your select or update to latest F7

1 Like

@nolimits4web, awesome! Perfect…