title: How can I make the form editable when I click the edit button?
body: <p>I made a basic profile page and users can be edit their profile informations. I put a button to end of the page. At first, form should be unedited but when I click the button form became editable. I tried to use :disable in my  tag bu didn't work. How can I solve this?</p>
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row gutters&quot;&gt;
          &lt;div class=&quot;col-xl-3 col-lg-3 col-md-12 col-sm-12 col-12&quot;&gt;
            &lt;div class=&quot;card h-100&quot;&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                &lt;div class=&quot;account-settings&quot;&gt;
                  &lt;div class=&quot;user-profile&quot;&gt;
                    &lt;div class=&quot;user-avatar&quot;&gt;
                      &lt;img src=&quot;../../assets/people/a2.jpg&quot; alt=&quot;Avatar&quot; class=&quot;profile_avatar&quot;&gt;
                    &lt;/div&gt;
                    &lt;h5 class=&quot;full_name&quot;&gt;abc&lt;/h5&gt;
                    &lt;h6 class=&quot;email&quot;&gt;abc@email.org&lt;/h6&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class=&quot;col-xl-9 col-lg-9 col-md-12 col-sm-12 col-12&quot;&gt;
            &lt;div class=&quot;card h-100&quot;&gt;
              &lt;div class=&quot;card-body&quot;&gt;
                &lt;div class=&quot;row gutters&quot;&gt;
                  &lt;div class=&quot;col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12&quot;&gt;
                    &lt;h6 class=&quot;mb-2 text-primary&quot;&gt;Profil Detayı&lt;/h6&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;first_name&quot;&gt;İsim&lt;/label&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;first_name&quot; placeholder=&quot;İsim&quot; disabled&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;last_name&quot;&gt;Soyisim&lt;/label&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;last_name&quot; placeholder=&quot;Soyisim&quot; disabled&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;username&quot;&gt;Username&lt;/label&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;username&quot; placeholder=&quot;Username&quot; disabled&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;email&quot;&gt;Email&lt;/label&gt;
                      &lt;input type=&quot;email&quot; class=&quot;form-control&quot; id=&quot;email&quot; placeholder=&quot;Email&quot; disabled&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;
                    &lt;div class=&quot;form-group&quot;&gt;
                      &lt;label for=&quot;gsm_number&quot;&gt;Telefon&lt;/label&gt;
                      &lt;input type=&quot;text&quot; class=&quot;form-control&quot; id=&quot;gsm_number&quot; placeholder=&quot;Telefon&quot; disabled&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;col-xl-6 col-lg-6 col-md-6 col-sm-6 col-12&quot;&gt;
                    &lt;label for=&quot;gsm_number&quot;&gt;Şifre&lt;/label&gt;
                    &lt;b-input-group&gt;
                      &lt;b-form-input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot; placeholder=&quot;Şifre&quot; disabled&gt;&lt;/b-form-input&gt;
                      &lt;template #append&gt;
                        &lt;b-button v-b-modal.modal-prevent-closing variant=&quot;default&quot; @click=&quot;passwordModal&quot;&gt;&lt;i class=&quot;fa fa-pencil-square-o&quot;&gt;&lt;/i&gt; &lt;/b-button&gt;
                        &lt;b-modal
                            id=&quot;modal-prevent-closing&quot;
                            ref=&quot;modal&quot;
                            title=&quot;Şifre Değiştir&quot;
                        &gt;
                          &lt;form ref=&quot;form&quot; @submit.stop.prevent=&quot;handleSubmit&quot;&gt;
                            &lt;b-form-group
                                label=&quot;Mevcut Şifre&quot;
                                label-for=&quot;current_pass&quot;
                                invalid-feedback=&quot;Mevcut şifrenizi giriniz&quot;
                            &gt;
                              &lt;b-form-input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;password&quot;
                              &gt;&lt;/b-form-input&gt;
                            &lt;/b-form-group&gt;
                            &lt;b-form-group
                                label=&quot;Yeni Şifre&quot;
                                label-for=&quot;new_pass&quot;
                                invalid-feedback=&quot;Yeni şifrenizi giriniz&quot;
                            &gt;
                              &lt;b-form-input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;new_pass&quot;
                              &gt;&lt;/b-form-input&gt;
                            &lt;/b-form-group&gt;
                            &lt;b-form-group
                                label=&quot;Yeni Şifre Doğrulama&quot;
                                label-for=&quot;new_pass_con&quot;
                                invalid-feedback=&quot;Yeni şifrenizi tekrar giriniz&quot;
                            &gt;
                              &lt;b-form-input type=&quot;password&quot; class=&quot;form-control&quot; id=&quot;new_pass_con&quot;
                              &gt;&lt;/b-form-input&gt;
                            &lt;/b-form-group&gt;
                          &lt;/form&gt;
                        &lt;/b-modal&gt;
                      &lt;/template&gt;
                    &lt;/b-input-group&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                    &lt;div class=&quot;text-left&quot;&gt;
                      &lt;b-button variant=&quot;default&quot; @click=&quot;editProfile&quot;&gt;&lt;i class=&quot;fa fa-pencil&quot;&gt;&lt;/i&gt; &lt;/b-button&gt;
                    &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>here is my html codes. I make all form disable and want to make the enable when I click the button</p>