Javascript VueJs：在v-repeat指令中使用v-el指令关注输入

我使用v-repeat指令显示一个列表

请注意v-el指令的动态创建参数，该参数由

v-el="inputField{{task.id}}" 

或者

v-el="{{'inputField' + task.id }}"

但它仍然没有被识别，因为我得到：

Uncaught TypeError: Cannot read property 'focus' of undefined

我想单击编辑按钮，并聚焦相应的输入字段

当我动态添加css类时，类似的语法也会起作用。只需使用.focus（）取消对该行的注释，然后单击“编辑”

newvue({
el:'任务'，
数据：{
“任务”：[{
“id”：25，
“body”：“Slack Noooo Yes”，
“完成”：正确，
“创建时间”：“2015-08-05 17:00:26”，
“更新时间”：“2015-08-05 17:00:26”
}, {
“id”：27，
“正文”：“和”，
“已完成”：错误，
“创建时间”：“2015-08-05 17:22:14”，
“更新时间”：“2015-08-05 17:22:14”
}, {
“id”：28，
“身体”：“幸福”，
“已完成”：错误，
“创建时间”：“2015-08-05 17:22:16”，
“更新时间：”2015-08-05 17:22:16
}, {
“id”：29，
“身体”：“爱”，
“完成”：正确，
“创建时间”：“2015-08-06 07:45:02”，
“更新时间：”2015-08-06 07:45:02
}],
新任务：“”
},
方法：{
editTask:函数（任务）{
var inputField='inputField'+task.id；
警报（输入字段）；
var self=这个；
self.$.inputField.focus（）；
document.querySelector（“.task”+task.id）.className+=“edit”；
}
}
});

任务
编辑
选择权
{{task.body}
编辑
您实际上不必按v-el对元素进行编号，因为您可以获得由v-repeat创建的子ViewModel。官方指南正在播放

您可以在
v-on
中将
this
传递到
editTask
，然后通过第一个参数获得子视图模型：

<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>

您还可以通过在函数中使用
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>

JS Fiddle:
这代表什么：
$$
？
<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";
}