Vue.js 新添加项目的焦点输入

所以我有一个项目列表和输入列表，通过v-for和v-model链接到每个项目

我单击一个按钮并将新项目添加到该列表中。我想关注链接到新添加项的输入

我不知道如何实现这个目标

<div id="app">
  <div v-for="item in sortedItems">
    <input v-model="item">
  </div>
  <button @click="addItem">
    add
  </button>
</div>


new Vue({
  el: '#app',
  data: {
    items: []
  },
  methods: {
    addItem: function() {
      this.items.push(Math.random());
    }
  },
  computed: {
    sortedItems: function() {
      return this.items.sort(function(i1, i2) {
        return i1 - i2;
      })
    }
  }
})

添加
新Vue({
el:“#应用程序”，
数据：{
项目：[]
},
方法：{
附加项：函数（）{
this.items.push（Math.random（））；
}
},
计算：{
sortedItems:函数（）{
返回this.items.sort（函数（i1，i2）{
返回i1-i2；
})
}
}
})

这是一个排序列表

---

感谢更新：受pkawiak评论的启发，这是一个基于指令的解决方案。我发现在

bind

部分调用

focus

不起作用；我不得不使用

nextTick

来延迟它

Vue.directive（'focus-on-create'{
//注意：使用Vue 1。在Vue 2中，el将是一个参数
绑定：函数（）{
Vue.nextTick（（）=>{
this.el.focus（）；
})
}
})
新Vue({
el:“#应用程序”，
数据：{
项目：[]
},
方法：{
附加项：函数（）{
this.items.push（Math.random（））；
}
},
计算：{
sortedItems:函数（）{
返回this.items.sort（函数（i1，i2）{
返回i1-i2；
})
}
}
})

添加
我想扩展一下@Roy的答案。
如果您使用的是任何UI框架，那么它将创建DIV，并在DIV输入标记中创建，因此此代码段将处理这种情况

Vue.directive('focus-on-create', { 
    bind: function(el) { 
          Vue.nextTick(() => { 
              el.querySelector('input').focus()
          })
    }
})

我认为这是最干净的方式。唯一的缺点是使用组件比简单的标记要重一些。但“过早优化是有害的”，我想你们也可以尝试更轻量级的方法。反正+1@pkawiak我同意，指令是更好的主意。答案已更新。谢谢伟大的非常感谢。
这个.el现在还没有定义。取而代之的是使用
bind:function（el）
并将
el
@Zout True用于Vue 2，但答案适用于Vue 1，其中的内容位于
this
中。请查看使用
v-focus
的文档作为示例