[Vuejs]-Button doesn't call the function for the first click

by

2👍

✅

Consider using v-model for this.

https://v2.vuejs.org/v2/guide/forms.html#v-model-with-Components

Your checkbox can have its v-model bound to a data property, and the disabled property on the button can be bound to the same. It’d look like this:

<template>
  <input type="checkbox" v-model="enableSubmit" />
  <button @click="mySubmitFunction()" :disabled="!enableSubmit">
</template>

<script>
  export default {
    data: function() {
      return {
        enableSubmit: false
      }
    },
    methods: {
      mySubmitFunction() {
        //...
      }
    }
  }
</script>
👤Tanner

3👍

First of all I don’t understand why you are using an event listner inside an event listner for that checkbox click.
Secondly, you can use v-model.
In your data, add property check like this:

data() {
   return {
     check: false
   }
}

Then in your html use like this:

<div class="guestlist-form-wrapper-checkbox">
            <input
              class="guestlist-input-checkbox guestlistCheckboxJs"
              v-model="check"
              type="checkbox"
              value="1"
              name="OptIn"
              id="OptIn"
            >

            <label class="guestlist-label-checkbox" for="OptIn">
              <span class="guestlist-span-checkbox"></span>
            </label>

          </div>

          <button
            :disabled="check"
            class="button-style buttonCheckboxJs disabled"
          >Check Availability</button>

I just use a check property which is a boolean. Then you can run your function on click of that button.

👤Nipun Jain

Leave a comment