更改CSS会破坏Javascript Focus（）方法

Question

我有一个输入字段，带有一个“编辑”按钮，每当我按下“编辑”按钮时，我的javascript都将注意力集中在“输入”字段上，如下所示：

http://jsfiddle.net/b8bm9w7n/

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

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

我唯一更改的是显示块 .editInputField类中的CSS，不显示任何内容 。

.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的更改通常是在Model更改后的批处理过程中进行的。

这是一个有效的更新CodePen：

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

关键更改是：

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

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

有关$nextTick更多信息，请参见： http : $nextTick