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

Posted 2023-02-23

【中文标题】使用 Vue 的点击编辑文本字段

【英文标题】：Click-to-Edit text field with Vue

【发布时间】：2017-12-16 10:26:55

【问题描述】：

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

 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>

【问题讨论】：

您对两者都使用了相同的v-model="form.name"！换成不同的！

也把form: name:'', email: '' 加入data() 你的问题解决了！:)

@HirenGohel 不是真的，因为它会检查 isEditing 变量并显示所有字段。

好的，但是您需要定义它以进行编辑！我知道定义这个问题没有解决！

【参考方案1】：

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

                            
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>

【讨论】：

正在寻找一个最佳解决方案，这样我就不需要创建计算属性，表单可能有 10 个字段，所以我需要创建 10 个计算属性？

您可以定义方法。看看编辑过的例子

如果我们不对文本进行任何更改，它不会在模糊时关闭

【参考方案2】：

有很多方法可以做到这一点。我可能会推荐一个组件。

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: '[e-mail]'


new Vue(
  el:"#app",

  data() 
    return 
      form: User
    ;
  ,
)

<script src="https://unpkg.com/vue@2.2.6/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>

【参考方案3】：

我为此编写了一个组件，我称之为Click-to-Edit。

它的作用：

支持v-model 在单击其他位置和按 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>