我使用 v-repeat 指令显示列表。
http://jsfiddle.net/ftc9ev7p/1/
请注意v-el指令动态创建的参数,它由
组成v-el="inputField{{task.id}}"
或者
v-el="{{'inputField' + task.id }}"
它仍然没有被识别,因为我得到:
Uncaught TypeError: Cannot read property 'focus' of undefined
我想单击编辑按钮并将焦点放在相应的输入字段上。
当我动态添加 css 类时,类似的语法有效。只需使用 .focus() 取消注释该行,然后单击“编辑”即可。
new Vue({
el: '#tasks',
data: {
"tasks": [{
"id": 25,
"body": "Slack Noooo Yes",
"completed": true,
"created_at": "2015-08-05 17:00:26",
"updated_at": "2015-08-05 17:00:26"
}, {
"id": 27,
"body": "And",
"completed": false,
"created_at": "2015-08-05 17:22:14",
"updated_at": "2015-08-05 17:22:14"
}, {
"id": 28,
"body": "Happiness",
"completed": false,
"created_at": "2015-08-05 17:22:16",
"updated_at": "2015-08-05 17:22:16"
}, {
"id": 29,
"body": "Love",
"completed": true,
"created_at": "2015-08-06 07:45:02",
"updated_at": "2015-08-06 07:45:02"
}],
newTask: ''
},
methods: {
editTask: function(task) {
var inputField = 'inputField' + task.id;
alert(inputField);
var self = this;
self.$$.inputField.focus();
document.querySelector(".task" + task.id).className += " edit";
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.12.8/vue.min.js"></script>
<table class="table" id="tasks">
<thead>
<tr>
<th>Task</th>
<th>Edit</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr v-repeat="task: tasks">
<td class="todo">
<span class="task{{ task.id }}" v-on="dblclick: editTask(task)">
{{ task.body }}
</span>
</td>
<td>
<input type="text" class="editInputField" v-el="inputField{{ task.id }}" value="{{ task.body }}" v-on="keyup:editTask(task) | key 'enter'">
</td>
<td>
<button class="btn btn-xs btn-primary" v-on="click: editTask(task)">Edit</button>
</td>
</tr>
</tbody>
</table>
这是 jsfiddle:
最佳答案
您实际上不必通过 v-el 对元素进行编号,因为您可以获得由 v-repeat 创建的子 ViewModel。官方指南在http://vuejs.org/guide/events.html#Invoke_Handler_with_Expression .
您可以将this
传递给v-on
中的editTask
,然后您可以通过第一个参数获取子ViewModel:
<div v-repeat="task: tasks">
<span class="task" v-el="label" v-on="dblclick: editTask(this)">
<input type="text" v-el="inputField" class="editInputField" value="{{ task.body }}">
</div>
editTask: function (task) {
task.$$.inputField.focus();
task.$$.label.className += " edit";
}
您还可以通过在函数中使用 event.targetVM
来获取 targetVM,而无需将其传递给您的函数。
<div v-repeat="task: tasks">
<span class="task" v-el="label" v-on="dblclick: editTask()">
<input type="text" v-el="inputField" class="editInputField" value="{{ task.body }}">
</div>
editTask: function () {
event.targetVM.$$.inputField.focus();
event.targetVM.$$.label.className += " edit";
}
JS fiddle :http://jsfiddle.net/n1ef18uq/1/
关于javascript - VueJs : Focus on Input using v-el Directive inside v-repeat Directive,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31853337/