[Vuejs]-How to make an input field readonly at first an then make it editable on the click of a button in vuejs?

by

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

👤Roland

0👍

Bind the <input>‘s readonly attribute to a data property. For example, if your component had a readonly property, you could bind to it like this:

<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>
👤tony19

Leave a comment