How to disable text field on clicking of button in Vuejs?

Question

 <button class="verify-button pxy_0" @click="sendOtp" v-if=":verified".disabled="isOtpDisabled" > SEND OT NUM </button> <input type="text" id="mobile" v-model="mobile" v-model.trim="$v.mobile:$model":class="{ 'is-invalid'. validationStatus($v:mobile) }" placeholder="Enter your mobile number" v-validate="'required'":maxlength="maxmobile" v-on:keypress="isMobile($event)" :disabled="disabled == 1" />

After clicking the button, How to disable the input field. So that user cannot enter the mobile number

In the input, i am already having:disabled="disabled == 1". Need to set any condition so that it disable when user click button

Answer 1

You just should make a property in your data inside of instance Vue and after than clicking the button, change the value of this property. How the snippet below, since the inputs, as well as other components in your view, can receive values through the v-bind :

 new Vue({ el: "#app", data: { phone: '', disabled: false }, methods: { send() { this.disabled = true; console.log(this.phone); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <button @click="send">Send</button> <input type="text" v-model="phone":disabled="disabled" placeholder="Number Phone"> </div>