How can I change type attribute from submit to button on vue.js 2?

Question

I try like this:

<template>
    <button @click="checkout" class="btn btn-danger pull-right" :type="typeButton">
        Checkout
    </button> 
</template>
<script>
    export default {
        methods: {
            data() {
                return {
                    typeButton: 'submit'
                }
            },
            checkout(e) {
                this.typeButton = 'button'
                ...
            }
        },
    }
</script>

Which gives the following error:

[Vue warn]: Property or method "typeButton" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

How can I solve this problem?

samayo · Accepted Answer · 2017-12-14 12:54:45Z

2

Move your data(){} object out of your methods: {}

So, your export should look like this:

export default {
  data () {
    return {
      typeButton: 'submit'
    }
  },
  methods: {
    checkout(e) {
      this.typeButton = 'button'
    }
  },
}

answered Dec 14, 2017 at 12:54

samayo

16.5k13 gold badges95 silver badges114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I change type attribute from submit to button on vue.js 2?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related