VueJS：从其ID读取div内容

Question

在第一个示例中，我在组件的模板中：

<div id="hello">hello world</div>

在console.log(this.$refs['hello'])中调用myMethod()时，控制台中出现undefined。

在第二个示例中，我有：

<div v-for="item in data">
  <div :id="'hello-'+item.id">hello {{ item.id }}</div>
</div>

在console.log(this.$refs['hello-1'])中调用myMethod()时，控制台中也会显示undefined。

我的代码有什么问题？

Answer 1

您不能通过赋予元素refs来获得元素id。您应该将ref绑定到该元素。这是一个示例：

<div v-for="item in data" :key="item.id">
  <div :id="'hello-'+item.id" :ref="'hello-'+item.id">hello {{ item.id }}</div>
</div>

也不要忘记使用v-for

将键绑定到迭代元素