Vue's ul list is dynamically generated, and the height of its parent container is wrong.
In Vue.js, if you use v-fordynamically generated ullists, the height of the parent container may be incorrect.
This is because the ul element has a margin and padding by default , and these default values may affect the height calculation of the parent container .
To solve this problem, you can add a style on the ul element to clear the default margin and padding . For example:
<template>
<div class="container">
<ul class="list">
<li v-for="(item, index) in items" :key="index">{
{
item }}</li>
</ul>
</div>
</template>
<style>
.list {
list-style: none;
margin: 0;
padding: 0;
}
</style>
In the above example, a class name is used and the list-style, margin and padding attributes are set in the style. This clears the default margin and padding and ensures that the height of the list is calculated correctly. At the same time, in order to prevent the parent container from collapsing in height, it is also necessary to add a style to the parent container to clear the float . For example:
.container {
overflow: hidden;
}
This clears the floats and avoids errors in the height of the parent container.