VueJs：在 v-repeat 指令中使用 v-el 指令专注于输入

Question

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

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

组成

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

或者

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

仍然无法识别，因为我得到：

Uncaught TypeError: Cannot read property 'focus' of undefined

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

当我动态添加 css class 时，类似的语法有效。只需取消注释带有 .focus() 的行并单击 "edit"。

  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：

http://jsfiddle.net/ftc9ev7p/1/

Answer 1

您实际上不必通过 v-el 对元素进行编号，因为您可以获得通过 v-repeat 创建的子 ViewModel。官方指南在 http://vuejs.org/guide/events.html#Invoke_Handler_with_Expression.

你可以在v-on中将this传递给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/

VueJs：在 v-repeat 指令中使用 v-el 指令专注于输入

VueJs: Focus on Input using v-el Directive inside v-repeat Directive

html

javascript

list

laravel

vue.js