Creating polygons inside <svg>...</svg> using 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 values:
data() {
return {
...
polygonArr: [1, 2, 5],
...
}
},
Output from inspector tool:
...
<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>
...
The output is missing :ref="...".
Changing :ref="i" to :refx="i" fixes it:
<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>
Why is this happening and how can I address it? Other attributes like title seem to work fine.