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>的{{1}}属性绑定到数据属性。例如，如果您的组件具有readonly属性，则可以像这样绑定它：

readonly

<input :readonly="readonly">

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

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中单击按钮使其可编辑？

2 个答案: