laravel VueJs：在 v-repeat 指令中使用 v-el 指令专注于输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31853337/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJs: Focus on Input using v-el Directive inside v-repeat Directive
提问by LoveAndHappiness
I display a list by using the v-repeat directive.
我使用 v-repeat 指令显示一个列表。
http://jsfiddle.net/ftc9ev7p/1/
http://jsfiddle.net/ftc9ev7p/1/
Please notice the dynamically created argument of the v-eldirective, which is made of
请注意v-el指令的动态创建的参数，它由
v-el="inputField{{task.id}}"
or alternatively
或者
v-el="{{'inputField' + task.id }}"
Still it doesn't get recognized, since I get:
仍然没有得到认可，因为我得到：
Uncaught TypeError: Cannot read property 'focus' of undefined
I want to click the edit buttonand have the according input field focused on.
我想单击编辑按钮并关注相应的输入字段。
A similar syntax works, when I dynamically add a css class. Just uncomment the line with the .focus() and click "edit".
当我动态添加一个 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>Here is the jsfiddle:
这是jsfiddle：
回答by orzFly
You don't really have to number the elements by v-el since you can get a child ViewModel created by v-repeat. The official guide is on http://vuejs.org/guide/events.html#Invoke_Handler_with_Expression.
您实际上不必按 v-el 为元素编号，因为您可以获得由 v-repeat 创建的子 ViewModel。官方指南位于http://vuejs.org/guide/events.html#Invoke_Handler_with_Expression。
You can pass thisto editTaskin v-onand then you can get the child ViewModel by the first argument:
你可以通过this对editTask中v-on，然后你可以通过第一个参数获取子视图模型：
<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";
}
Also you can get the targetVM by using event.targetVMin the function without the need of passing this to your function.
您还可以通过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/
JS小提琴：http: //jsfiddle.net/n1ef18uq/1/
