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

Question

我有一个输入字段，带有一个编辑按钮，每当我按下编辑按钮时，我的 javascript 就会像这样关注输入字段:

http://jsfiddle.net/b8bm9w7n/

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

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

我唯一更改的是 .editInputField 类中的 CSS 从显示 block 到不显示。

.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