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

llfritz

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

s.molinari

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

Scott

llfritz

This post is deleted!

llfritz

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

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.

s.molinari

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

Scott

llfritz

This post is deleted!

llfritz

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

rstoenescu

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

llfritz

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

No More Posting New Topics!

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