时间戳

首页 > 解决方案 > 如果在其上使用函数，则无法在 Javascript 中引用动态 $refs [VUE]

javascript - 如果在其上使用函数，则无法在 Javascript 中引用动态 $refs [VUE]

问题描述

我正在使用模板 for 循环动态生成 $ref 名称。

如果我在 for 循环中控制台记录特定项目（参见示例），则可以访问它。但是，当我采用相同的引用并在其上调用诸如 focus() 或 scrollToView() 之类的函数时，控制台变得非常混乱并引发错误：

vue.js:1743 TypeError: this.$refs.element2.focus is not a function

所以要清楚：

console.log(this.$refs['element2']); <-- WORKS!
this.$refs['element2'].focus(); <-- DOESNT WORK :(

https://jsfiddle.net/3xj7afgh/238/

标签： javascripthtmlvue.js

解决方案

这是小提琴中的模板：

<div v-for="(result, index) in data" :key="index">
  <input type="text" type="file" :ref="'element' + result.id" />
</div>

以下文档摘录适用于这种情况：

当在带有 的元素/组件上使用时v-for，注册的引用将是一个包含 DOM 节点或组件实例的数组。

所以你需要这样做：

this.$refs['element2'][0].focus()

v-for如您所见，混合动态引用可能会变得混乱。

或者，您可以使用静态 ref 来实现相同的目的：

<div v-for="(result, index) in data" :key="index">
  <input type="text" type="file" ref="elements" />
</div>

// Index 1 is the second element in the DOM
this.$refs.elements[1].focus()

推荐阅读