Невозможно связать `ref` при использовании` 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 для ссылки на его дочерние элементы. В компоненте Vue, который рендерит ваши <polygon>, вы можете получить доступ к этой ссылке через this.$refs. Тем не менее, он не будет отображаться в HTML.

Сейчас не уверен, но вы можете проверить атрибут ref в инструментах vue для разработчиков .