javascript - 使用 `ref` 时无法绑定(bind) `v-for`

Question

我需要在 <svg>...</svg> 中创建多边形所以我用了v-for像这样:

<polygon v-for="id in polygonArr" :key="id" :ref="id" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459" />

并在polygonArr是

data() {
  return {
    ...
    polygonArr: [1, 2, 5],
    ...
  }
},

但是当我运行它并使用检查器工具检查时，它显示如下

...
<polygon data-v-5567ea9e="" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459"></polygon>
<polygon data-v-5567ea9e="" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459"></polygon>
<polygon data-v-5567ea9e="" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459"></polygon>
...

如您所见，:ref="..."不存在于输出中。

我尝试更改 :ref="i"至 :refx="i"它完美地工作:

<polygon data-v-5567ea9e="" refx="1" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459"></polygon>
<polygon data-v-5567ea9e="" refx="2" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459"></polygon>
<polygon data-v-5567ea9e="" refx="5" points="15,0 18.541,11.459 30,11.459 20.729,18.541 24.271,30 15,22.918 5.729,30 9.271,18.541 0,11.459 11.459,11.459"></polygon>

为什么会这样？我应该怎么做才能解决这个问题？其他属性，例如 title等似乎工作正常。

Answer 1

因为 ref Vue 组件在内部使用它来引用它的子组件。在呈现 <polygon> 的 Vue 组件中的，您可以通过 this.$refs 访问该引用.但是，它不会显示在 HTML 中。

现在不确定，但您可以检查 ref vue developer tools 中的属性然而。