Vue.js 使用 Vue 的点击编辑文本字段

发布于07月12日

我正在Vue js上工作，编辑字段时遇到问题.当我点击一个字段进行编辑时，all个可编辑的字段变为活动状态.这是我的密码.

 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 使用聚焦和模糊方法来显示/隐藏表单元素！

                            
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.js相关问答推荐

Vue CDN的html工作，但v—如果不工作

Vue.js 使用 Vue 的点击编辑文本字段

推荐答案

Vue.js相关问答推荐

Vue CDN的html工作，但v—如果不工作

VueUse onClickOutside不支持右键单击

带 Bootstrap 的 Vue js，导航栏菜单不起作用

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

Vuetify右侧并排switch

在计算(computed)属性上调用数组方法

：deep() 带有嵌套 scss 规则的语法

Vuex 和 Event Bus 有什么区别？

VuetifyJS：如何摆脱 v-stepper 组件的提升？

Vue.js 中有没有类似Jquery $(document).ready的功能？

带有 vue.js 的 img 网址

为什么 Vue 路由/Webpack 开发服务器现在在页面刷新时显示无法获取/路径？

如何使用 laravel-mix 将 bootstrap-vue 加载到 Laravel 5 中？

Vuetify 单选按钮未显示为选中状态

使用 Blade/Mustache 模板混合 Laravel 和 Vue.Js

如果我刷新我的网页，Vuex store是空的

Vue.js react性如何在幕后工作？

Vue js在列表中添加动态字段，删除和排序不起作用

在 Vue 应用程序中创建一个类的单个实例

超过最大调用堆栈大小 Vuetify