Javascript 如何首先使输入字段为只读，然后在vuejs中单击按钮使其可编辑？

//这是我的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中可用的解决方案，该解决方案将

的

只读属性绑定到数据属性。例如，如果您的组件有一个
只读
属性，您可以像这样绑定到它：

<input :readonly="readonly">


使输入可编辑
将
的
只读属性绑定到数据属性。例如，如果您的组件有一个
只读
属性，您可以像这样绑定到它：

<input :readonly="readonly">


使输入可编辑

编辑

输入值为：{{text}

新Vue({
el:“应用程序”，
数据：{
文本：“文本”，
应该禁用：true
},
方法：{
点击（）{
this.shouldDisable=false
}
}
})


编辑

输入值为：{{text}

新Vue({
el:“应用程序”，
数据：{
文本：“文本”，
应该禁用：true
},
方法：{
点击（）{
this.shouldDisable=false
}
}
})

感谢它的工作，我还想知道，如果我在vue的datepicker组件上应用相同的逻辑，那么它就不工作了。您有什么解决方案可以使datepicker vue的组件成为只读的，然后单击按钮即可编辑？嗯，您的问题很清楚，但我需要显示一些代码，或者最好提出一个关于iti的新问题。我使用vue组件的disablepicker功能进行了尝试，我能够做到，谢谢！！感谢它的工作，我也想知道，如果我在vue的datepicker组件上应用相同的逻辑，那么它就不工作了。你有什么解决方案使datepicker vue的组件成为只读的，然后点击一个按钮就可以编辑吗？嗯，你的问题很清楚，但我需要显示一些代码，或者最好提出一个关于iti的新问题。我使用vue组件的disablepicker功能进行了尝试，我能够做到，谢谢！！