使用 Vue 进行点击编辑文本字段 [英] Click-to-Edit text field with Vue

问题描述

我正在使用 Vue js，但在编辑字段时遇到问题.当我单击一个字段进行编辑时，所有 可编辑字段将变为活动状态.这是我的代码.

 导出默认 {道具:['profileHeight']，数据() {返回 {用户:用户，isEditing: 假,形式:{姓名:''，电子邮件: ''，},};},安装(){},方法: {activateInEditMode() {this.isEditing = true},deActivateInEditMode() {this.isEditing = false}}}

 <span>配置文件设置</span><p>全名<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>电子邮件<span>{{User.state.auth.email}}</span><span v-show="isEditing" ><input v-model="form.email" type="text" class="form-control" ></span>

解决方案

尝试使用 focus 和 blur 方法来显示/隐藏表单元素！希望这会有所帮助！

新的 Vue({el: '#app',数据(){返回 {用户:{姓名: ''，电子邮件: ''},编辑字段:''}},方法 : {焦点字段(名称){this.editField = 名称；},模糊场(){this.editField = '';},显示场(名称){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="应用程序"><h1>配置文件设置</h1><label for="user-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">

<label for="user-email">电子邮件地址</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">

I am working on Vue js and having an issue editing a field. When I click on a field to edit it, all the editable fields become active. Here is my 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>

解决方案

Try using focus and blur methods to show/hide form elements! Hope this helps!

                            
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>

这篇关于使用 Vue 进行点击编辑文本字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！