How to use the .close() function for a collapsible?



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



  • Do you have some code to show what you are trying to do?

    Scott



  • This post is deleted!


  • <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.



  • Sorry, but could you put the whole code inside two sets of three back ticks? -> ```

    Scott



  • This post is deleted!


  •     <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>```

  • Admin

    Put a reference on q-collapsible and call .close() method on it.
    I already made a small guide for Vue beginners which is currently available here (this is part of v0.14 docs but apply to any version): https://github.com/quasarframework/quasar-framework.org/blob/dev/source/components/introduction-for-beginners.md



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


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.