更改 CSS 会破坏 Javascript Focus() 方法

Question

我有一个输入字段，带有一个编辑按钮，每当我按下编辑按钮时，我的 javascript 都会将焦点放在输入字段上，如下所示：

http://jsfiddle.net/b8bm9w7n/

接下来我想通过使用 Vue v-class 指令隐藏 Input 字段以使用 CSS 动态显示，这也可以正常工作：

http://jsfiddle.net/b8bm9w7n/1/

我唯一改变的是 .editInputField 类中的 CSS 从 display block 到 display none。

.editInputField {
    display: none;
}

.show {
    display: block;
}

现在 Inputfield 动态显示，但是 focus() 不起作用，我不知道为什么。有人有什么建议吗？

对于喜欢 CodePen 的任何人：

工作示例：http://codepen.io/anon/pen/Jdgozw

非工作示例：http://codepen.io/anon/pen/BNXyEz

Answer 1

您需要将 focus() 调用放在 $nextTick 处理程序中，因为（在生产模式下）对 DOM 的更改通常在模型更改后以批处理方式进行。

这是一个更新的 CodePen：

http://codepen.io/anon/pen/RPXNXN

关键变化是：

        editTask: function (that) {
            this.editedTodo = that.todo;

            this.$nextTick(function () {
              that.$$.editInputField.focus();
            });
        },

有关$nextTick 的更多信息，请参阅：http://vuejs.org/api/instance-methods.html