我正在寻找一个点击并编辑的 Vue 组件。
我发现了a fiddle https://jsfiddle.net/ppyeo1tg/611/并做了一些编辑。它的工作原理如下：
小提琴在这里 https://jsfiddle.net/ppyeo1tg/611/.
问题：我需要额外点击一下才能使输入集中。怎样才能让它自动对焦呢？
来自小提琴的代码。 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;
},
}
})
您可以使用指令，例如
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://v2.vuejs.org/v2/guide/custom-directive.html https://v2.vuejs.org/v2/guide/custom-directive.html
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
