VueJs:专注于在v-repeat指令中使用v-el指令的输入 [英] VueJs: Focus on Input using v-el Directive inside v-repeat Directive

问题描述

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

I display a list by using the v-repeat directive.

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

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

Please notice the dynamically created argument of the v-el directive, which is made of

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

或

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 button and have the according input field focused on.

当我动态添加一个CSS类时，类似的语法也可以工作.只需用.focus()取消注释该行，然后单击编辑".

A similar syntax works, when I dynamically add a css class. Just uncomment the line with the .focus() and click "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:

Here is the jsfiddle:

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

推荐答案

由于可以获取由v-repeat创建的子ViewModel，因此不必真正用v-el编号元素.官方指南位于 http://vuejs.org/guide/events.html#Invoke_Handler_with_Expression.

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.

您可以将this传递给v-on中的editTask，然后可以通过第一个参数获取子ViewModel:

You can pass this to editTask in v-on and then you can get the child ViewModel by the first argument:

<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，而无需将其传递给函数.

Also you can get the targetVM by using event.targetVM in the function without the need of passing this to your function.

<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小提琴: http://jsfiddle.net/n1ef18uq/1/

这篇关于VueJs:专注于在v-repeat指令中使用v-el指令的输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！