单击编辑按钮时，如何使表单可编辑

您应该添加一个数据变量isEditable并将disabled属性绑定到其值。单击按钮，使isEditable = true。这将使您的表单可编辑。

<template>
<div>
<div class="container">
<div class="row gutters">
<div class="col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12">
<div class="card h-100">
<div class="card-body">
<div class="account-settings">
<div class="user-profile">
<div class="user-avatar">
<img src="../../assets/people/a2.jpg" alt="Avatar" class="profile_avatar">
</div>
<h5 class="full_name">abc</h5>
<h6 class="email">abc@email.org</h6>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12">
<div class="card h-100">
<div class="card-body">
<div class="row gutters">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<h6 class="mb-2 text-primary">Profil Detayı</h6>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="first_name">İsim</label>
<input type="text" class="form-control" id="first_name" placeholder="İsim" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="last_name">Soyisim</label>
<input type="text" class="form-control" id="last_name" placeholder="Soyisim" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" id="username" placeholder="Username" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Email" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<div class="form-group">
<label for="gsm_number">Telefon</label>
<input type="text" class="form-control" id="gsm_number" placeholder="Telefon" :disabled="!isEditable">
</div>
</div>
<div class="col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12">
<label for="gsm_number">Şifre</label>
<b-input-group>
<b-form-input type="password" class="form-control" id="password" placeholder="Şifre" :disabled="!isEditable"></b-form-input>
<template #append>
<b-button v-b-modal.modal-prevent-closing variant="default" @click="passwordModal"><i class="fa fa-pencil-square-o"></i> </b-button>
<b-modal
id="modal-prevent-closing"
ref="modal"
title="Şifre Değiştir"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<b-form-group
label="Mevcut Şifre"
label-for="current_pass"
invalid-feedback="Mevcut şifrenizi giriniz"
>
<b-form-input type="password" class="form-control" id="password"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre"
label-for="new_pass"
invalid-feedback="Yeni şifrenizi giriniz"
>
<b-form-input type="password" class="form-control" id="new_pass"
></b-form-input>
</b-form-group>
<b-form-group
label="Yeni Şifre Doğrulama"
label-for="new_pass_con"
invalid-feedback="Yeni şifrenizi tekrar giriniz"
>
<b-form-input type="password" class="form-control" id="new_pass_con"
></b-form-input>
</b-form-group>
</form>
</b-modal>
</template>
</b-input-group>
</div>
</div>
<div class="text-left">
<b-button variant="default" @click="editProfile"><i class="fa fa-pencil"></i> </b-button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>

在您的组件定义中

data(){
return {
// Other state
isEditable: false
}
},
methods: {
editProfile() {
this.isEditable = true
}
}

如果你想让按钮起开关的作用，那么

editProfile() {
this.isEditable = !this.isEditable
}

您应该这样做。

<input type="text" id="no_of_staff" readonly />

然后点击按钮

$("#no_of_staff").attr("readonly", false);
document.getElementById('no_of_staff').removeAttribute('readonly');//purejs