Как сделать поле ввода только для чтения, а затем сделать его редактируемым нажатием кнопки в vuejs?

Question

// это мои 2 деления, которые я должен сначала сделать readonly или по умолчанию, затем, нажав кнопку редактирования, я хочу удалить readonly и сделать его редактируемым

 <div>
     <input type="text" 
     placeholder="[e-mail]" v-model="userDetails.email ">
   </div>

  <div>
   <input type="text"  placeholder="[phone]"  
    v-model="userDetails.contactNumber">
</div>

// это мой значок, по щелчку которого должно быть выполнено вышеуказанное действие!!

<img class="pencil-image" 
src="/static/images/[e-mail]" 
@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
    }
  }
})

Увидеть это в действии

Answer 2

Привязать <input> "s 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="[e-mail]">
  <button @click="editProfile">Make input editable</button>
</div>