使用 Vue 单击和编辑文本输入 [英] Click-and-edit text input with Vue

问题描述

我正在寻找一个点击并编辑的 Vue 组件.

我找到了

小提琴在这里.

问题:我需要额外的点击才能使输入聚焦.如何让它自动聚焦?

来自小提琴的代码.HTML:

单击要编辑的值！<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>

JS:

new Vue({el: '#app',数据: {待办事项:[{'title':'one value','edit':false},{'title':'one value','edit':false},{'title':'otro titulo','edit':false}],已编辑的待办事项:空，消息:你好 Vue.js！"},方法: {编辑待办事项:功能(待办事项){this.editedTodo = 待办事项；},}})

解决方案

你可以使用一个指令，例如

JS

new Vue({el: '#app',数据: {待办事项: [{ 标题:'一个值'，假}，{ 标题:'一个值'，假}，{ 标题:'otro titulo'，false }],已编辑的待办事项:空，消息:你好 Vue.js！"},方法: {editTodo: 函数 (todo) {this.editedTodo = 待办事项}},指令:{重点: {插入 (el) {el.focus()}}}})

HTML

单击要编辑的值！<ul class="todo-list"><li v-for="todo in todos"><输入v-if="todo.edit"v-model="todo.title"@blur="todo.edit = false; $emit('update')"@keyup.enter="todo.edit=false; $emit('update')"v焦点><div v-else><label @click="todo.edit = true;">{{todo.title}} </label>

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

I'm looking for a click-and-edit Vue component.

I've found a fiddle and made some edits. It works like this:

The fiddle is here.

The problem: I need an additional click to make the input focused. How can I make it focused automatically?

The code from the fiddle. 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;
    },
  }

})

解决方案

You can use a directive, for example

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>

You can find more info here https://vuejs.org/v2/guide/custom-directive.html

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