如何首先将输入字段设置为只读，然后通过单击 vuejs 中的按钮使其可编辑？

Question

//这些是我的 2 个 div，我必须首先或默认设置为只读，然后单击编辑按钮我想删除只读并使其可编辑

 <div>
     <input type="text" 
     placeholder="Example@scio.com" v-model="userDetails.email ">
   </div>

  <div>
   <input type="text"  placeholder="+91 860 420 3001"  
    v-model="userDetails.contactNumber">
</div>

//这是我的图标，点击它应该执行上述操作！

<img class="pencil-image" 
src="/static/images/pencil-edit-button@2x.png" 
@click="editProfile">

请帮我找到一个可以在 vuejs 中运行的解决方案

Answer 1

将 <input> 的 readonly 属性绑定到数据属性。例如，如果您的组件有一个 readonly 属性，您可以像这样绑定到它：

<input :readonly="readonly">

new Vue({
  el: '#app',
  data() {
    return {
      readonly: true
    }
  },
  methods: {
    editProfile() {
      this.readonly = false
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">
  <input type="text" :readonly="readonly" placeholder="Example@scio.com">
  <button @click="editProfile">Make input editable</button>
</div>

Answer 2

<div id="app">
<input type="text" :readonly="shouldDisable" v-model="text"> <button @click="clicked">Edit</button>
<hr>
<p>The value of input is: {{text}}</p>
</div>

new Vue({
  el: "#app",
  data: {
    text: 'text',
    shouldDisable: true
  },
  methods: {
    clicked() {
        this.shouldDisable = false
    }
  }
})

See it in action

如何首先将输入字段设置为只读，然后通过单击 vuejs 中的按钮使其可编辑？

how to make an input field readonly at first an then make it editable on the click of a button in vuejs?

html

javascript

readonly

input-field

vue.js