{"action":"created","issue":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/310","labels_url":"https://api.github.com/repos/vuejs/Discussion/issues/310/labels{/name}","comments_url":"https://api.github.com/repos/vuejs/Discussion/issues/310/comments","events_url":"https://api.github.com/repos/vuejs/Discussion/issues/310/events","html_url":"https://github.com/vuejs/Discussion/issues/310","id":97315713,"number":310,"title":"Accessing Vue HTML Elements through vm.$$ and v-el","user":{"login":"maedi","id":601650,"avatar_url":"https://avatars.githubusercontent.com/u/601650?v=3","gravatar_id":"","url":"https://api.github.com/users/maedi","html_url":"https://github.com/maedi","followers_url":"https://api.github.com/users/maedi/followers","following_url":"https://api.github.com/users/maedi/following{/other_user}","gists_url":"https://api.github.com/users/maedi/gists{/gist_id}","starred_url":"https://api.github.com/users/maedi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/maedi/subscriptions","organizations_url":"https://api.github.com/users/maedi/orgs","repos_url":"https://api.github.com/users/maedi/repos","events_url":"https://api.github.com/users/maedi/events{/privacy}","received_events_url":"https://api.github.com/users/maedi/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-07-26T13:13:07Z","updated_at":"2015-07-26T22:36:05Z","closed_at":null,"body":"I'd like to create an input field that responds to a keyboard enter by adding a new field below and focusing the cursor on that field. However ``v-el`` doesn't appear to work on sub HTML elements, just the element that corresponds to the Vue.\r\n\r\n**HTML**\r\n```html\r\n<ul id=\"fields\" v-el=\"thisWorks\">\r\n  <li v-repeat=\"fields\">\r\n    <input v-model=\"text\" v-el=\"field{{$index}}\" v-on=\"keyup:newField(this) | key 'enter'\"></input>\r\n  </li>\r\n</ul>\r\n```\r\n\r\n**JS**\r\n```javascript\r\n\r\nvar field = function() {\r\n  this.text = '';\r\n}\r\nvar fields = new Vue({\r\n  el: \"#fields\",\r\n  data: {\r\n    fields: [new field()]\r\n  },\r\n  methods: {\r\n    newField: function (component) {\r\n      // focus on new field\r\n      var self = component;\r\n      Vue.nextTick(function () {\r\n        // DOESN'T WORK\r\n        //var newFieldName = \"field\" + (self.$index + 1);\r\n        //this.$$[newFieldName].focus();\r\n      });\r\n      // add new field\r\n      this.$data.fields.push(new field());\r\n    }\r\n  }\r\n})\r\n```\r\n\r\n**Error**\r\n\r\n``Uncaught TypeError: Cannot read property 'field1' of undefined`` even though the object is there in ``fields.$data.fields`` and in the DOM.\r\n\r\n```fields.$$.thisWorks``` is accessible.\r\n\r\nHappy to hear a more Vue way of doing this using components etc."},"comment":{"url":"https://api.github.com/repos/vuejs/Discussion/issues/comments/125045562","html_url":"https://github.com/vuejs/Discussion/issues/310#issuecomment-125045562","issue_url":"https://api.github.com/repos/vuejs/Discussion/issues/310","id":125045562,"user":{"login":"simplesmiler","id":550229,"avatar_url":"https://avatars.githubusercontent.com/u/550229?v=3","gravatar_id":"","url":"https://api.github.com/users/simplesmiler","html_url":"https://github.com/simplesmiler","followers_url":"https://api.github.com/users/simplesmiler/followers","following_url":"https://api.github.com/users/simplesmiler/following{/other_user}","gists_url":"https://api.github.com/users/simplesmiler/gists{/gist_id}","starred_url":"https://api.github.com/users/simplesmiler/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/simplesmiler/subscriptions","organizations_url":"https://api.github.com/users/simplesmiler/orgs","repos_url":"https://api.github.com/users/simplesmiler/repos","events_url":"https://api.github.com/users/simplesmiler/events{/privacy}","received_events_url":"https://api.github.com/users/simplesmiler/received_events","type":"User","site_admin":false},"created_at":"2015-07-26T22:36:05Z","updated_at":"2015-07-26T22:36:05Z","body":"@swift1 you are correct with the `| key 'enter'`, my cdn was pointing at 0.11.8 instead of the latest.\r\n\r\n@maedi I would probably make `focus` a part of the viewmodel, listen to the focus event of inputs, and introduce methods `focusUp` and `focusDown`.\r\n\r\nSomething like this: https://jsfiddle.net/simplesmiler/48jxvnzt/7/\r\nNote the directive now takes a boolean value."}}