Skip to content

Any way to have it work with vue.js? #15

Open

Description

@maloykr

Maybe this is obvious, but any way to make it work with vue.js framework7 plugin?

Thanks,
kevin.

Activity

  1. cemarta7 commented on Jul 11, 2019

    @cemarta7

    On main.js after Framework7.use(Framework7Vue); add

    Framework7.use(Framework7Keypad);
    

    Then in your page

    <f7-list-input
    	input-id="credit_card"
    	label="Card Number"
    	type="numpad"
    	placeholder=""
    	 clear-button
    	required
    	@change="changeCardNumber()"
    	@input="new_card.card_number = $event.target.value"
    ></f7-list-input>
    
    changeCardNumber(){
    	var self=this;
    	this.new_card.card_number=this.$f7.keypad.get().value
    },
    

    That's how I got it to work.

  2. cepm-nate commented on Oct 22, 2019

    @cepm-nate

    I'm using Vue and F7 as well, yet rendering the input using , no F7 involved.

    In main.js I have

    import Framework7Keypad from 'framework7-plugin-keypad';
    Framework7.use(Framework7Keypad);
    

    And in my module, when I call this.$f7.keypad.create({inputEl: 'input.qty'}), I get Class constructor Framework7Class cannot be invoked without 'new'.

    TypeError: Class constructor Framework7Class cannot be invoked without 'new'
        at new Keypad (framework7-keypad.js?d830:22)
        at new create (framework7-keypad.js?d830:863)
    

    ... I'm hunting for solutions and will report back.

  3. pedrohenriquerissato commented on Oct 24, 2019

    @pedrohenriquerissato

    Same problem as the others.

    Installed with:
    npm install framework7-plugin-keypad

    Instantiated in main:

    import Framework7Keypad from 'framework7-plugin-keypad';  
    Framework7.use(Framework7Keypad);
    

    And finally, created the component:

    <f7-list-input
    	input-id="credit_card"
    	label="Card Number"
    	type="numpad"
    	placeholder=""
    	required
    ></f7-list-input>
    

    Got the same error as @cepm-nate :
    "[Vue warn]: Error in updated hook: "TypeError: Class constructor Framework7Class cannot be invoked without 'new'"

  4. cemarta7 commented on Oct 24, 2019

    @cemarta7

    Can you guys try to do the import like this

    import Framework7Keypad from 'framework7-plugin-keypad/dist/framework7.keypad.js';
    
    Framework7.use(Framework7Vue);
    Framework7.use(Framework7Keypad);//<- after importing framework7vue
    

    Also, which version of framework7 are you using?

    then in template

    <f7-list-input
                                input-id="cvv"
                                label="CVV"
                                type="numpad" 
                                placeholder=""
                                clear-button
                                required
                                @change="changeCVV()"
                                @input="new_card.cvv = $event.target.value"
                        ></f7-list-input>
    

    type="numpad"

    @cepm-nate
    @pedrohenriquerissato

  5. pedrohenriquerissato commented on Oct 24, 2019

    @pedrohenriquerissato

    Can you guys try to do the import like this
    import Framework7Keypad from 'framework7-plugin-keypad/dist/framework7.keypad.js';

    Framework7.use(Framework7Vue);
    Framework7.use(Framework7Keypad);//<- after importing framework7vue

    Also, which version of framework7 are you using?
    then in template
    <f7-list-input
    input-id="cvv"
    label="CVV"
    type="numpad"
    placeholder=""
    clear-button
    required
    @change="changeCVV()"
    @input="new_card.cvv = $event.target.value"
    >

    type="numpad"
    @cepm-nate
    @pedrohenriquerissato

    There was a typo in:

    import Framework7Keypad from 'framework7-plugin-keypad/dist/framework7.keypad.js';
    

    Should be:

    import Framework7Keypad from 'framework7-plugin-keypad/dist/framework7-keypad.js';
    

    But, unfortunately same error was generated:

    vue.esm.js?efeb:628 [Vue warn]: Error in updated hook: "TypeError: Class constructor Framework7Class cannot be invoked without 'new'"
    
    found in
    
    ---> <F7View>
           <F7App>
             <App> at src/App.vue
               <Root>
    
    TypeError: Class constructor Framework7Class cannot be invoked without 'new'
        at new Keypad (framework7-keypad.js?43df:22)
        at Object.create (framework7-keypad.js?43df:863)
        at HTMLInputElement.eval (framework7-keypad.js?43df:903)
        at Dom7.each (dom7.module.js?4419:610)
        at Framework7.pageInit (framework7-keypad.js?43df:895)
        at eval (class.js?c95a:90)
        at Array.forEach (<anonymous>)
        at eval (class.js?c95a:89)
        at Array.forEach (<anonymous>)
        at Framework7.emit (class.js?c95a:83)
    

    I'm using this versions:

    "framework7": "^3.5.1",
    "framework7-plugin-keypad": "^3.0.1",
    "framework7-vue": "^3.5.1",
    
  6. cemarta7 commented on Oct 24, 2019

    @cemarta7

    This is my version:

            "framework7": "^3.6.5",
            "framework7-icons": "^2.1.1",
            "framework7-plugin-keypad": "^2.0.0",
            "framework7-vue": "^3.6.5",
    

    3.0.1 requires "framework7": "^5.0.5"

    https://github.com/framework7io/framework7-plugin-keypad/blob/v3.0.1/package.json

    downgrade "framework7-plugin-keypad" to "^2.0.0" or upgrade to framework7 5.

  7. pedrohenriquerissato commented on Oct 24, 2019

    @pedrohenriquerissato

    This is my version:
    "framework7": "^3.6.5",
    "framework7-icons": "^2.1.1",
    "framework7-plugin-keypad": "^2.0.0",
    "framework7-vue": "^3.6.5",

    3.0.1 requires "framework7": "^5.0.5"
    https://github.com/framework7io/framework7-plugin-keypad/blob/v3.0.1/package.json
    downgrade "framework7-plugin-keypad" to "^2.0.0" or upgrade to framework7 5.

    Upgraded framework7 to 5.0.5 and got the same error. Downgraded keypad to 2.0.0 and error was gone, but nothing was being done, maybe syntax changed trough this versions? Still trying to figure out why updating f7 didn't quit the error. Maybe some other package is interfering, like webpack.... idk.

  8. cepm-nate commented on Oct 24, 2019

    @cepm-nate

    Here is my version:

        "framework7": "^5.0.5",
        "framework7-icons": "^3.0.0",
        "framework7-plugin-keypad": "^3.0.1",
        "framework7-vue": "^5.0.5",
    

    I'm importing like such:

    import Vue from 'vue';
    import Framework7 from 'framework7/framework7-lite.esm.bundle';
    import Framework7Vue from 'framework7-vue/framework7-vue.esm.bundle';
    import Framework7Keypad from 'framework7-plugin-keypad/dist/framework7-keypad';
    ...
    Framework7.use(Framework7Vue);
    Framework7.use(Framework7Keypad);
    

    I still get the same error:

    Uncaught TypeError: Class constructor Framework7Class cannot be invoked without 'new'
        at new Keypad (framework7-keypad.js?d830:22)
        at Object.create (framework7-keypad.js?d830:863)
        at <anonymous>:1:26
    

    when executing app.$f7.keypad.create()
    Would seeing my babel or other configs help?

  9. Tarekajaj commented on Mar 5, 2020

    @Tarekajaj

    Don't know if this is related, I was getting an error when trying to use the plugin, and importing it like the following fixed my error:

    import 'framework7-plugin-keypad/dist/framework7-keypad.js';

  10. nederev commented on Mar 28, 2020

    @nederev

    same here with framework7 v5 and keyboard plugin 3.x
    tried
    import Framework7Keypad from 'framework7-plugin-keypad/dist/framework7-keypad.js';
    with no avail

  11. sirg2003 commented on Jun 8, 2020

    @sirg2003

    For anybody having troubles. Try this:

    import Framework7Keypad from 'framework7-plugin-keypad/src/framework7-keypad.js';
    import 'node_modules/framework7-plugin-keypad/src/framework7-keypad.less';
    
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions