Question

使用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

Answer 1

使用readonly而不是使用:disabled属性，并将其值设置为某个变量。该变量最初必须为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

export default {
  name: 'item-list',

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

单击编辑按钮后如何使禁用的输入可编辑

1 个答案: