Javascript vue.js将重点放在输入上

HTML

{{node.title}

JS

data（）{
返回{
displayTitle：“内联块”，
显示标题输入：“无”
};
},
showInput（）{
this.displayTitle=“无”
this.displayTitleInput=“内联块”
},
hideInput1（）{
this.displayTitle=“内联块”
this.displayTitleInput=“无”
},
hideInput2（事件）{
如果（event.keyCode===13）{
this.hideInput1（）
}
},

我是一名日本网络开发新手。对不起，我英语不好

HTML位于“v-for”（

v-for=“列表中的节点”

）中

双击文本时，它将变为

我希望在输入出现时能够将注意力集中在输入上

我试过了，但没用

HTML

{{node.title}

JS

showInput（id）{
this.displayTitle=“无”
this.displayTitleInput=“内联块”
this.$nextTick（this.$refs[“输入”+id][0].focus（））
},

---

控制台上没有错误，但不起作用。

您的主要问题是，

$nextTick

接受回调函数，但您正在执行

this.$refs["input_" + id][0].focus()

马上。您可以让您的代码与

this.$nextTick(() => {
  this.$refs["input_" + id][0].focus()
})

然而，我认为您将遇到更多的问题，您的代码可以变得更简单

您将发现的一个问题是，由于样式规则的原因，当双击任何节点输入时，所有节点输入都将可见

您可以将“编辑”标志存储在

节点

上或单独的对象中的某个位置

下面是一个通过以下方式简化代码的示例

当在

v-for

循环中使用时，使用

在

@keydown

事件绑定上使用

输入

修饰符

newvue({
el:“#应用程序”，
数据：{
名单：[
{id:1，标题：'Node#1'}，
{id:2，标题：'Node#2'}
],
编辑：{}
},
方法：{
showInput（id、索引）{
this.$set（this.editing，id，true）
这个.$nextTick（（）=>{
这是。$refs.input[index].focus（）
})
},
隐藏输入（id）{
此。编辑[id]=false
}
}
})

{{node.title}

您使用此的方式。$nextTick（）不正确。您应该向它传递一个回调函数

this.$nextTick(function () {
    this.$refs["input_" + id].focus()
})

---

但是，我不确定数组访问对您来说是如何工作的，因为我注意到，

$refs

是一个对象，其键指向ref名称

[编辑：感谢@Phil的评论，以上内容非常清楚。]

---

以上是解决您问题的正确方法。既然你已经得到了答案，我将补充一些其他的东西

看到此行为的原因是，当您更改

showInput（）

方法中文本框的可见性时，

$refs

中的引用不会更新。因此，当您调用

this.$refs[“输入”+id].focus（）时

，它实际上是在尝试将

焦点设置到隐藏元素上（因为当前引用未更新）

这就是为什么需要调用
$nextTick（）
来更新它。但是，如果您想快速解决问题，无需调用
$nextTick（）
，您可以像这样手动更新：

this.displayTitleInput = "inline-block"
this.$refs["input_" + id].style.display = this.displayTitleInput

this.$refs["input_" + id].focus();

这也会起作用：）希望有帮助
 自动对焦属性是您的朋友：

<input type="text" autofocus />

当我们验证表单并希望在每个字段上动态设置焦点时，这对我来说很有用

           this.$validator.validateAll("FORM_NAME").then(valid => {

                var errors = this.$validator.errors;

                if (valid) {
                    console.log('All Fields are valid')
                } else {
                    const errorFieldName = this.$validator.errors.items[0].field;
                    console.log(errorFieldName);
                    this.$refs[errorFieldName].focus();
                }

            });

如果要在单击某个内容后设置焦点，请使用vue js显示带有设置焦点的输入文本框

directives: {
  focus: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

并对其使用自定义指令。如果需要，它应该在单击时工作，然后使用单击设置

directives: {
  click: {
    // directive definition
    inserted: function (el) {
      el.focus()
    }
  }
}

并使用它

<input v-focus> or <input v-click>

enter code here

或
在这里输入代码
非常感谢您的评论。你是说像这样？this.$nextTick（this.$refs[“input”+id].focus（））未捕获类型错误：this.$refs[（“input”+t）].focus不是HTMLSpanElement.fn.\u withTask.fn.\u withTask（vue.runtime.esm.js？2b0e:1822）调用程序（vue.runtime.js？2b0e:2023）中dblclick（sl vue tree.js？c536:8）的VueComponent.showInput（sl vue.js？c536:8）函数我收到了此错误（T\T）抱歉，我删除
[0]
时出错。由于某种原因，
$refs
属性是一个数组哦，我的天哪！！！非常感谢你！！！你是个天才。我以前没用过这个。一套。技术性很强@日香，不客气
this.$set
与
Vue.set
相同。您需要将其用于反应性，因为最初，
编辑
没有属性，所以Vue不会自然检测到新属性。请参见注释~“当在具有
v-for
的元素/组件上使用时，注册的引用将是一个包含DOM节点或组件实例的数组。”是的，那一个也让我有点吃惊：）哦！！！！非常感谢你！！！在显示后放置焦点！我懂了。你很聪明@菲尔：是的，我现在注意到了阵列。如果不使用
v-for
，它会将参照保留在对象中。然而，我恐怕你对
这篇
的评论似乎是无效的。它在这里工作得很好。啊，当然。Vue将Vue文档中的
$nextTick
默认为当前Vue实例。（注意：自动对焦在mobile Safari上不起作用）。唉，SPA路由起作用时，它更脆弱，只会在第一次触发。（如果vue路由到另一个页面并最终返回此处，则无法设置焦点。）ref=。。。focus（）正在通过测试，尽管我还没有在iOS上测试过。