So I’ve noticed that on my Cordova-wrapped iOS app, the clickable part of the q-toolbar will disappear above the top of the screen when activated. Is this a known bug, or have I possibly done something wrong? There is no way to make the toolbar collapse down without the help of a connected button. I don’t have this problem with my Android version.

I am now defining that at the beginning of scanBarcode() in the same way. But once I have scanned a barcode, the vue should be routed to a new page (verify.vue) but instead stays at the one before the barcode scan. It almost seems like the router is stuck after attempting to route to another vue because none of the html elements work once the barcode has been scanned.

So I’m going to post all of my code because I’ve realized my situation is a bit more complicated.

<template>
<q-layout>

<topbar slot="header"></topbar>

<div class="layout-view">
    <div class="layout-padding">
        <errorDisplay></errorDisplay>
        <div class="card" v-if="state.availableClubPlans.length > 0">
          <div class="card-title bg-secondary text-white">
            Car Care Club
          </div>
          <div class="card-content card-force-top-padding">
            <p>
                Loyalty rewards!<br />Pay from your phone!<br />
                <button class="secondary" @click="newPlanSignup('club')">
                  Join Car Care Club Now
                </button>
            </p>
            <p>
                Already a member?<br />
                
                    <button class="bg-secondary text-white" @click="getBarcodePermissions">
                      Scan your window sticker
                    </button>
                
                  <br />or enter plan number below:<br />
                <!-- <signin v-on:submit='verify'></signin> -->
                <input v-model="clubCustCode" placeholder="plan number">
                <button class="bg-secondary text-white" @click="verify('club')">
                  Submit
                </button>
            </p>
          </div>

        </div>

        <div class="card" v-if="state.availablePassPlans.length > 0">
          <div class="card-title bg-faded text-white">
            Monthly Pass Plan
          </div>
          <div class="card-content card-force-top-padding">
            <p>
                One monthly fee gets you unlimited washes!<br />
                <button class="bg-faded text-white" @click="newPlanSignup('pass')">
                  Join Monthly Pass Now
                </button>
            </p>
            <p>
                Already a member?<br />
                
                    <button class="bg-faded text-white" @click="scanBarcode" disabled>
                      Scan your window sticker
                    </button>
                
                  <br />or enter plan number below:<br />
                <!-- <signin v-on:submit='verify'></signin> -->
                <input v-model="passCustCode" placeholder="plan number">
                <button class="bg-faded text-white" @click="verify('pass')">
                  Submit
                </button>
            </p>
          </div>

        </div>

        <!-- <div class="card sign-in">
          <div class="card-title bg-primary text-white">
            Already a member?
          </div>
          <router-link :to="{ name:'select' }">
              <button class="bg-light-blue-4 text-white" disabled>
                Scan your window sticker
              </button>
          </router-link>
          <div class="card-content card-force-top-padding">
            Or enter plan number below:
          </div>
          <signin v-on:submit='verify'></signin>
        </div> -->
     </div>

</div>

   <!--<div slot="footer" v-if="showWallet" class="toolbar wallet" @click="openWallet()">
      <q-toolbar-title :padding="0">
        Wallet
      </q-toolbar-title>
  </div>--> 

</q-layout>
</template>

<script>
import { ActionSheet } from ‘quasar’
import { Loading } from ‘quasar’
import topbar from ‘./topbar.vue’
import router from ‘router’
import signin from ‘./signin.vue’
import state from ‘…/state’
import errorDisplay from ‘./error_msg.vue’
import apiRequest from ‘…/api-requests’
import walletMixin from ‘components/wallet-mixin.js’

export default {
    data () {
        return {
            state,
            clubCustCode: '',
            passCustCode: '',
            showWallet: true,
            scanBarcodeComplete: false
        }
    },
    components: {
        topbar,
        signin,
        errorDisplay
    },
    methods: {
        newPlanSignup: function (type) {
            state.planType = type
            sessionStorage.setItem('planType', type)
            router.push({ name: 'select' })
        },
        
        verify: function (type) {
            state.planType = type
            sessionStorage.setItem('planType', type)
            state.customer.Code = type === 'club' ? this.clubCustCode : this.passCustCode
            sessionStorage.setItem('customer', JSON.stringify(state.customer))
            router.push({ name: 'verify' })
        },

        indexOpenWallet: function (gallery) {
          this.openWallet(gallery);
        },

        getBarcodePermissions() {
            var self = this;
            var permissions = cordova.plugins.permissions;
            
            permissions.hasPermission(permissions.CAMERA, function( status ){
            if ( status.hasPermission ) {
                console.log("Yes :D ");
                //state.hasCameraPermission = true;
              self.scanBarcode();
            }
            
            else {
                permissions.requestPermission(permissions.CAMERA, success, error);
                function error() {
                console.warn('Camera permission is not turned on');
                //alert("To use barcode scanner, enable camera permissions")
                //state.hasCameraPermission = false;
                return;
                }

            function success( status ) {
              if( !status.hasPermission ) 
              {
              alert("To use barcode scanner, enable camera permissions")
              //state.hasCameraPermission = false;
              error();
              return;
              }
              
              else  
              {                  
              self.scanBarcode();
              }
            }
            }
            
            

            //if(state.hasCameraPermission)
            //{

            //}
        });
        },
       scanBarcode () {
        
        var code = '';
              cordova.plugins.barcodeScanner.scan(
              
                  function (result) {
              
                    if(result.text)
                    {
                    alert("Your barcode scanned! Text: " + result.text)
                    code += result.text
                    code = code.replace("+", "%2B")
                    alert("Code after formatting: ");
                    alert(code);
                    state.fastPassCode = code;
                    sessionStorage.setItem('fastPassCode', state.fastPassCode)
                    alert("Pushing to verify page: ");
                    self.$router.push({ name: 'verify' });                                       
                    }
                  
                    else
                    {
                    //alert("Scanning cancelled or failed")
                    }
              
                  }, 
            
                  function (error) {
                  alert("Scanning failed: " + error);
                  }
              );
       }
    },
    created () {
        // Clear sessionStorage variables
        sessionStorage.clear();

        

        if(state.items.length < 1) {
            apiRequest.makeRequest('GetItemList')
        }

    },
    mixins:[walletMixin]
}

</script>

<style scoped> .layout-padding { text-align: center; } .card { padding-bottom: 1.2em; } .sign-in button { margin: 1.2em 0; } .sign-in .card-content { padding-bottom: 0; } button { margin: 0 0 5px 0; } </style>

Right now I am referring to “this” by assigning it to a variable at the beginning of both of my methods. I am calling my scanBarcode method from my getBarcodePermissions method and this seemed to be the only way to make that call happen. But in scanBarcode(), at one point I decide to route to another Vue. Currently I have “self.$router.push({ name: ‘verify’ }).” I am not sure which function needs to be turned into an arrow function to make this work.

Will do, thank you. Quasar is pretty awesome by the way, I appreciate all the work you’ve put into this framework!

This is a method in a Vue component. May I ask why arrow functions are needed? I get the this.$router, but are the arrow functions needed whenever you’re directing to a new Vue inside a method?

So I’m trying to push to another vue once I’ve gotten results from cordova.plugins.barcodeScanner.scan():
scanBarcode() {

            var permissions = cordova.plugins.permissions;
            
            permissions.hasPermission(permissions.CAMERA, function( status ){
            if ( status.hasPermission ) {
                console.log("Yes :D ");
                state.hasCameraPermission = true;
            }
            
            else {
                permissions.requestPermission(permissions.CAMERA, success, error);

                function error() {
                console.warn('Camera permission is not turned on');
                //alert("To use barcode scanner, enable camera permissions")
                state.hasCameraPermission = false;
                }

                function success( status ) {
                if( !status.hasPermission ) {
                    alert("To use barcode scanner, enable camera permissions")
                    state.hasCameraPermission = false;
                    error();
                    }
                else {
                    state.hasCameraPermission = true;
                    }
                }
            }
            });

            if(state.hasCameraPermission)
            {
              var code = '';
              cordova.plugins.barcodeScanner.scan(
              
              function (result) {
              setTimeout(function() {
              if(result.text)
                {
                alert("Your barcode scanned! Text: " + result.text)
                code += result.text
                code = code.replace("+", "%2B")
                alert("Code after formatting: ");
                alert(code);
                state.fastPassCode = code;
                sessionStorage.setItem('fastPassCode', state.fastPassCode)
                router.push({ name: 'verify' });
                alert("Pushing to verify page: ");
                
                }
              else
                {
                  alert("Scanning cancelled or failed")
                }
              }, 1000);
              }, 
            
              function (error) {
              alert("Scanning failed: " + error);
              }
              );
            }
          
          // if(state.fastPassCode)
          //     {
          //     alert("Pushing to verify page: ")
          //     router.push({ name: 'verify' });
          //     }
       }

But no matter what I do it will not push to the new Vue. Does anyone here have experience with this plugin? The plugin successfully gets me data but cannot seem to push to a new vue.

this.$refs.referencename.method() worked! Thank you very much. Everywhere I looked the “this” part didn’t seem to be there.

    <q-collapsible :label="walletLabel" class="bg-faded" id="wallet">
				
				<errorDisplay></errorDisplay>

				<!--<p class="barcode">*{{state.customer.Code}}*<br />*{{state.customer.Code}}*<br />*{{state.customer.Code}}*</p>
				<p class="textcode">{{state.customer.Code}}</p>-->
      <template v-if="((state.prepaidBalance <= 0) || (state.prepaidBalance == undefined)) && (!this.showInput)">
      <div>Add Amount: $ <input placeholder="0.00" v-model="walletFunds"></div>
      <button class="tertiary" @click="setupAddFunds()">
        Add Funds
      </button>
      </template>
                <!--Put Credit Card Stuff Here-->
      <template v-if="this.showInput == true">        
        <div><label>CCN: <input v-model="ccnum"></label></div>
        <div class="short pull-left">
          <label>EXP:</label>
          <q-select type="list" placeholder="month" v-model="monthValue" :options="months"></q-select>
        </div>
        <div class="short pull-left">
          <span class="slash">/</span>
          <q-select type="list" placeholder="year" v-model="yearValue" :options="years"></q-select>
        </div>
        <br/>
        <br/>
        <br/>
        <div><label>CVV: <input v-model="cvv"></label></div>                       
        <button type="submit" class="tertiary" @click="addFunds()">
          Submit
        </button>
      </template>
				<button class="tertiary" v-if="!state.newCustomer" @click="cancel()">
					Cancel
				</button>
    </q-collapsible>
</template>```
```<script>
    import { required, numeric, minLength, maxLength } from 'vuelidate/lib/validators'
    import { Loading } from 'quasar'
    import router from 'router'
    import state from '../state'
    import errorDisplay from './error_msg.vue'
    import apiRequest from '../api-requests'

    export default {
        data () {
            return {
              state,
              showInput: false,
              months: [
                {
                  label: '01',
                  value: '01'
                },
                {
                  label: '02',
                  value: '02'
                },
                {
                  label: '03',
                  value: '03'
                },
                {
                  label: '04',
                  value: '04'
                },
                {
                  label: '05',
                  value: '05'
                },
                {
                  label: '06',
                  value: '06'
                },
                {
                  label: '07',
                  value: '07'
                },
                {
                  label: '08',
                  value: '08'
                },
                {
                  label: '09',
                  value: '09'
                },
                {
                  label: '10',
                  value: '10'
                },
                {
                  label: '11',
                  value: '11'
                },
                {
                  label: '12',
                  value: '12'
                }
              ],
              years: [
                {
                  label: '2017',
                  value: '17'
                },
                {
                  label: '2018',
                  value: '18'
                },
                {
                  label: '2019',
                  value: '19'
                },
                {
                  label: '2020',
                  value: '20'
                },
                {
                  label: '2021',
                  value: '21'
                },
                {
                  label: '2022',
                  value: '22'
                },
                {
                  label: '2023',
                  value: '23'
                },
                {
                  label: '2024',
                  value: '24'
                },
                {
                  label: '2025',
                  value: '25'
                },
                {
                  label: '2026',
                  value: '26'
                }
              ]
            }
        },
        components: {
            errorDisplay
        },
        validations: {
            ccnum: {
                numeric,
                minLength: minLength(16)
            },
            cvv: {
                numeric,
                maxLength: maxLength(4)
            }
        },
        methods: {
            cancel: function () {
              this.showInput = false;
              
            },
            setupAddFunds: function () {
              this.showInput = true;
              //Call to recordSale
			},

            addFunds: function () {
              
              //Call to completeSale
              this.showInput = false;
			}

        },
        created() { },
        
        computed: {
          walletLabel: function () {
            if (state.prepaidCode == undefined) {
              return "Wallet: $0.00"
            }

            else {
              return "Wallet: $" + state.prepaidCode
            }
          }
          
        }
    }
</script>```

<template>
<q-collapsible :label=“walletLabel” class=“bg-faded”>

			<errorDisplay></errorDisplay>

			<!--<p class="barcode">*{{state.customer.Code}}*<br />*{{state.customer.Code}}*<br />*{{state.customer.Code}}*</p>
			<p class="textcode">{{state.customer.Code}}</p>-->
  
  <button class="tertiary" v-if="((state.prepaidBalance <= 0) || (state.prepaidBalance == undefined)) && (!this.showInput)" @click="addFunds()">
    Add Funds
  </button>

            <!--Put Credit Card Stuff Here-->
  <template v-if="this.showInput == true">
    <div>Add Funds: +<input placeholder="0.00"></div>
    <div><label>CCN: <input></label></div>
    <div class="short pull-left">
      <label>EXP:</label>
      <q-select type="list" placeholder="month" v-model="monthValue" :options="months"></q-select>
    </div>
    <div class="short pull-left">
      <span class="slash">/</span>
      <q-select type="list" placeholder="year" v-model="yearValue" :options="years"></q-select>
    </div>
    <br />
    <br />
    <br />
    <button type="submit" class="tertiary" @click="addFunds()">
      Submit
    </button>
  </template>
			<button class="tertiary" v-if="!state.newCustomer" @click="cancel()">
				Cancel
			</button>
</q-collapsible>

</template>

<script>
import { required, numeric, minLength, maxLength } from ‘vuelidate/lib/validators’
import { Loading } from ‘quasar’
import router from ‘router’
import state from ‘…/state’
import errorDisplay from ‘./error_msg.vue’
import apiRequest from ‘…/api-requests’

export default {
    data () {
        return {
          state,
          showInput: false,
          months: [
            {
              label: '01',
              value: '01'
            },
            {
              label: '02',
              value: '02'
            },
            {
              label: '03',
              value: '03'
            },
            {
              label: '04',
              value: '04'
            },
            {
              label: '05',
              value: '05'
            },
            {
              label: '06',
              value: '06'
            },
            {
              label: '07',
              value: '07'
            },
            {
              label: '08',
              value: '08'
            },
            {
              label: '09',
              value: '09'
            },
            {
              label: '10',
              value: '10'
            },
            {
              label: '11',
              value: '11'
            },
            {
              label: '12',
              value: '12'
            }
          ],
          years: [
            {
              label: '2017',
              value: '17'
            },
            {
              label: '2018',
              value: '18'
            },
            {
              label: '2019',
              value: '19'
            },
            {
              label: '2020',
              value: '20'
            },
            {
              label: '2021',
              value: '21'
            },
            {
              label: '2022',
              value: '22'
            },
            {
              label: '2023',
              value: '23'
            },
            {
              label: '2024',
              value: '24'
            },
            {
              label: '2025',
              value: '25'
            },
            {
              label: '2026',
              value: '26'
            }
          ]
        }
    },
    components: {
        errorDisplay
    },
    methods: {
        cancel: function () {
          this.showInput = false;

        },
        addFunds: function () {
          this.showInput = true;
		}
    },
    created() { },
    computed: {
      walletLabel: function () {
        if (state.prepaidCode == undefined) {
          return "Wallet: $0.00"
        }

        else {
          return "Wallet: $" + state.prepaidCode
        }
      }
      
    }
}

</script>

Inside my cancel function I want to tell this collapsible to close.

I’m trying to close a collapsible in javascript using the .close() function but the documentation does not seem clear to me. Any suggestions?