Vue.js 如何在单击“编辑”按钮后使禁用的输入可编辑

在使用vuejs单击“编辑”按钮后，如何使这些输入可编辑

form
  .form-group
    label(for='exampleInputEmail1') Email address
    input.form-control(type='text', placeholder='jan.kowalski@poczta.pl', readonly='')
  .form-group
    label(for='exampleInputEmail1') Name
    input.form-control(type='text', placeholder='Jan', readonly='')
  .form-group
    label(for='exampleInputEmail1') Surname
    input.form-control(type='text', placeholder='Kowalski', readonly='')    
  .form-group
    label(for='exampleInputPassword1') Password
    input.form-control(type='password', placeholder='*********', readonly='')
  .form-group
    label(for='exampleInputPassword1') Password
    input.form-control(type='password', placeholder='*********', readonly='')
  .form-group
    a.btn.btn-primary.btn-blood.btn-main
      | Edit

---

使用

：disabled

并将其值设置为某个变量，而不是使用

readonly

属性。该变量最初需要为true，但按下按钮将其更改为false

举个例子，你的哈巴狗看起来像

form
  .form-group
    label(for='exampleInputEmail1') Email address
    input.form-control(type='text', placeholder='jan.kowalski@poczta.pl', :disabled='notYetClicked')
  .form-group
    label(for='exampleInputEmail1') Name
    input.form-control(type='text', placeholder='Jan', :disabled='notYetClicked')
  .form-group
    label(for='exampleInputEmail1') Surname
    input.form-control(type='text', placeholder='Kowalski', :disabled='notYetClicked')    
  .form-group
    label(for='exampleInputPassword1') Password
    input.form-control(type='password', placeholder='*********', :disabled='notYetClicked')
  .form-group
    label(for='exampleInputPassword1') Password
    input.form-control(type='password', placeholder='*********', :disabled='notYetClicked')
  .form-group
    a.btn.btn-primary.btn-blood.btn-main(v-on:click='notYetClicked = false')
      | Edit

并将新变量添加到JS中

导出默认值{
名称：'项目列表'，
数据（）{
返回{
没错，
}
},
}

开始阅读Vue中“事件处理”的工作原理。