<son v-for="(item, index) in data" :key="index" :ref="item.ref" /> // subcomponent plus key value, call plus corresponding subscript, if not yet possible add setTimeout. this.$refs.refSon[index].init() //refSon ref name index corresponding to the subscript
Tag Archives: vfor
Vue Scaffolding V-for Error: Elements in iteration expect to have ‘v-bind:key’ directives vue/require-v-for-key
When V-for traversal is used in Vue, the official documents strongly recommend using the unique value as the key value, followed by: key = “”. It is worth noting that: or v-bind must be included in the key
Error message of V-IF and V-for mutually exclusive codes in Vue project
Never use V-IF and V-for on the same element at the same time.
<!-- bad: control error-->
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id">
{{ user.name }}
</li>
</ul>
We tend to do this in two common situations:
To filter items in a list (such as V-for = “user in users” V-IF = “user.Isactive”). In this case, replace users with a calculated attribute (such as activeusers) to return the filtered list.
computed: {
activeUsers: function () {
return this.users.filter((user) => {
return user.isActive
})
}
}
<ul>
<li
v-for="user in activeUsers"
:key="user.id">
{{ user.name }}
</li>
</ul>
To avoid rendering lists that should have been hidden (such as V-for = “user in users” V-IF = “shouldshowusers”). In this case, move the V-IF to the container element (such as UL, OL).
<!-- bad -->
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id">
{{ user.name }}
</li>
</ul>
<!-- good -->
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id">
{{ user.name }}
</li>
</ul>