web-dev-qa-db-fra.com

Champ de texte Click-to-Edit avec Vue

Je travaille sur Vue js et j'ai un problème pour modifier un champ. Lorsque je clique sur un champ pour le modifier, tout les champs modifiables deviennent actifs. Voici mon code.

 export default {
        props: ['profileHeight'],

        data() {
            return {
                User: User,
                isEditing: false,
                form:{
                    name:'',
                    email: '',
                },
            };
        },

        mounted() {
        },

        methods: {
            activateInEditMode() {
                this.isEditing = true
            },
            deActivateInEditMode() {
                this.isEditing = false
            }
        }
    }
 <span>Profile settings</span>
                        <p>Full name<span v-on:click="activateInEditMode" v-show="!isEditing">{{User.state.auth.name}}</span>
                            <span v-show="isEditing" >
                             <input v-model="form.name" type="text" class="form-control" >
                            </span>
                        </p>

                        <p>E-mail<span>{{User.state.auth.email}}</span>
                            <span v-show="isEditing" >
                             <input v-model="form.email" type="text" class="form-control" >
                            </span>
                        </p>

enter image description here

vue.jsvuejs2vue-component
10
Bilal Maqsood

Essayez d'utiliser les méthodes de focus et de flou pour afficher/masquer les éléments du formulaire! J'espère que cela t'aides!

                            
new Vue({
  el: '#app',
  data(){
    return {
      user : {
        name: '',
        email: ''
      },
      editField : ''
    }
  },
  methods : {
    focusField(name){
      this.editField = name;
    },
    blurField(){
      this.editField = '';
    },
    showField(name){
      return (this.user[name] == '' || this.editField == name)
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <h1>Profile settings</h1>
  <label for="user-name">Full name</label>
  <div class="field">
    <span class="field-value" v-show="!showField('name')" @click="focusField('name')">{{user.name}}</span>
    <input v-model="user.name" v-show="showField('name')" id="user-name" type="text" class="field-value form-control" @focus="focusField('name')" @blur="blurField">
  </div>
  
  <label for="user-email">Email address</label>
  <div class="field">
    <span class="field-value" v-show="!showField('email')" @click="focusField('email')">{{user.email}}</span>
    <input v-model="user.email" v-show="showField('email')" type="email" class="field-value form-control" @focus="focusField('email')" @blur="blurField">
  </div>
</div>
11
Emīls Gulbis

Il existe des dizaines de façons de procéder. Je pourrais recommander un composant.

console.clear()

Vue.component("editable",{
  props:["label", "value"],
  template:`
  <p>
    {{label}} 
    <span @click="editing=true" v-show="!editing">
      {{value}}
    </span>
    <span v-show="editing" >
      <input :value="value"
             @input="$emit('input', $event.target.value)"
             @keydown.enter="editing=false"
             type="text" 
             class="form-control" >
    </span>
  </p>
  `,
  data(){
    return {
      editing: false,
    }
  }
})

const User = {
  name: 'bob',
  email: '[email protected]'
}

new Vue({
  el:"#app",

  data() {
    return {
      form: User
    };
  },
})
<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <span>Profile settings</span>
  <editable label="Full name" v-model="form.name"></editable>
  <editable label="E-mail" v-model="form.email"></editable>
  <br>
  {{form}}
</div>
8
Bert

J'ai écrit un composant pour cela, je l'appelle Click-to-Edit.

Ce qu'il fait:

  • Les soutiens v-model
  • Enregistre les modifications en cliquant ailleurs et en appuyant sur Enter

ClickToEdit.vue:

<template>
  <div>
    <input type="text"
           v-if="edit"
           :value="valueLocal"
           @blur.native="valueLocal = $event.target.value; edit = false; $emit('input', valueLocal);"
           @keyup.enter.native="valueLocal = $event.target.value; edit = false; $emit('input', valueLocal);"
           v-focus=""
             />
        <p v-else="" @click="edit = true;">
          {{valueLocal}}
        </p>
    </div>
</template>

<script>
  export default {

  props: ['value'],

  data () {
  return {
      edit: false,
      valueLocal: this.value
    }
  },

  watch: {
    value: function() {
      this.valueLocal = this.value;
    }
  },

  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }

}
</script>
5
Andrey Moiseev