如何在 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" />

单击按钮后，如何禁用输入字段。 使用户无法输入手机号码

在输入中，我已经有了：disabled="disabled == 1"。 需要设置任何条件，以便在用户单击按钮时禁用

Answer 1

您只需在 Vue 实例内的数据中创建一个属性，然后单击按钮后，更改此属性的值。 由于输入以及视图中的其他组件，下面的代码片段如何通过 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>