Currently, I am in the process of designing a new web page using Vue on Nuxt to replace the existing one (using VScode). However, I have encountered an issue while utilizing v-for to generate lists. Within the tag, there is an unknown string(attribute) that seems to be affecting my CSS and causing me some trouble.
p.s. I am quite new to web design. I suspect that the issue lies with the v-bind key, as I have not fully grasped how it impacts the outcome. Thank you for your assistance!
The mysterious string(attribute): data-v-768556b7=""
<a data-v-768556b7="" href="#">Notebook</a>
Below is a snippet of the code:
<div class="prod-sub-menu products-menu sub-menu">
<ul class="sub-nav">
<li
v-for="(pName, index) in productMenuList"
:id="pName.idName"
:key="index"
class="prod-sub-item sub-item current"
>
<a :href="pName.url">{{pName.menuName}}</a>
<ul v-for="(subName,index2) in pName['subMenu']" :key="index2">
<li>
<a :href="subName.url">{{subName.subMenuName}}</a>
</li>
</ul>
</li>
...
...