代码之家 › 专栏 › 技术社区 › Andrey Moiseev Ashraf Ali

单击并用Vue编辑文本输入

vue.js javascript

2

Andrey Moiseev Ashraf Ali · 技术社区 · 7 年前

我正在查找单击并编辑Vue组件。

我发现了一把小提琴并做了一些编辑。工作原理如下:

The fiddle is here 。

问题: I need an additional click to make the input focused.如何使它自动聚焦?

小提琴的密码。HTML:< /P>

<div id=“app”> 单击要编辑的值! <ul class=“Todo列表”> <li v-for=“todo in todos”> <input v-if=“todo.edit”v-model=“todo.title” @blur=“todo.edit=false;$emit('update')” @keyup.enter=“todo.edit=false;$emit('update')”> <DIV V-ELSE> <label@click=“todo.edit=true;”>todo.title</label> &L/DIV & GT; &L./L> &L/UL & GT; &L/DIV & GT; < /代码> JS: 新Vue({ EL:“应用程序”, 数据:{ TODOS:[标题':'一个值','编辑':假, 'title':'one value','edit':假, 'title':'otro titulo','edit':假], editedtodo:空, 信息:“你好,Vue.js!” } 方法:{ edittodo:函数(todo){ this.editedtodo=todo; } } }) < /代码> <做了一些编辑。工作原理如下: The fiddle is here. 问题:我需要再单击一次以使输入集中。如何使它自动聚焦? 小提琴的密码。HTML: <div id="app"> Click the values to edit! <ul class="todo-list"> <li v-for = "todo in todos"> <input v-if = "todo.edit" v-model = "todo.title" @blur= "todo.edit = false; $emit('update')" @keyup.enter = "todo.edit=false; $emit('update')"> <div v-else> <label @click = "todo.edit = true;"> {{todo.title}} </label> </div> </li> </ul> </div> JS: new Vue({ el: '#app', data: { todos: [{'title':'one value','edit':false}, {'title':'one value','edit':false}, {'title':'otro titulo','edit':false}], editedTodo: null, message: 'Hello Vue.js!' }, methods: { editTodo: function(todo) { this.editedTodo = todo; }, } })

2 回复 | 直到 7 年前

1

3

AitorDB 7 年前

例如,可以使用指令

JS

new Vue({
  el: '#app',
  data: {
    todos: [
      { title: 'one value', edit: false },
      { title: 'one value', edit: false },
      { title: 'otro titulo', edit: false }
    ],
    editedTodo: null,
    message: 'Hello Vue.js!'
  },
  methods: {
    editTodo: function (todo) {
      this.editedTodo = todo
    }
  },
  directives: {
    focus: {
      inserted (el) {
        el.focus()
      }
    }
  }
})

HTML

<div id="app">
    Click the values to edit!
    <ul class="todo-list">
        <li v-for="todo in todos">
            <input
                v-if="todo.edit"
                v-model="todo.title"
                @blur="todo.edit = false; $emit('update')"
                @keyup.enter="todo.edit=false; $emit('update')"
                v-focus
            >
            <div v-else>
                <label @click="todo.edit = true;"> {{todo.title}} </label>
            </div>
        </li>
    </ul>
</div>

你可以在这里找到更多信息 https://vuejs.org/v2/guide/custom-directive.html

2

0

Andrey Moiseev Ashraf Ali 7 年前

用 @ AitorDB 帮助我为此编写了一个Vue组件,我称之为 Click-to-Edit 。它已经准备好使用了,所以我要发布它。

它做什么:

支架 v-model
在单击其他位置和按时保存更改 进入

单击编辑.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>