javascript - 如何首先将输入字段设置为只读，然后单击 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

<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