如何使禁用的输入在点击编辑按钮后可以编辑？

Question

如何使这些输入的内容在被点击编辑按钮后可以编辑？

form
  .form-group
    label(for='exampleInputEmail1') Email address
    input.form-control(type='text', placeholder='[email protected]', 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

Answer 1

而不是使用 readonly 属性，使用 :disabled 并将它的值设置为某个变量。这个变量一开始需要为真，但按下按钮后会将其改为假。

举个例子，你的 pug 会是这样的

form
  .form-group
    label(for='exampleInputEmail1') Email address
    input.form-control(type='text', placeholder='[email protected]', :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

export default {
  name: 'item-list',

  data() {
    return {
      notYetClicked: true,
    }
  },
}