使用v-slide-group时页面首次加载两侧箭头不显示，调整窗口大小后才出现如何解决

问题根因 #

这是Vuetify v-slide-group 组件的常见初始化时机问题：组件内部是否展示切换箭头的逻辑，依赖渲染完成后对容器宽度、子元素总宽度的差值计算。你当前用 v-if 控制组件渲染，当异步请求完成、v-if 条件命中后组件才挂载，但组件内部的宽度计算逻辑没有被主动触发，只有窗口resize事件会触发该计算逻辑，因此只有调整窗口后箭头才会正常显示。

可行解决方案 #

方案1：手动触发组件resize方法（最推荐） #

给v-slide-group添加ref标识，在列表数据加载完成后，等待DOM更新完毕主动调用组件内置的resize方法触发计算：

<!-- 给组件添加ref -->
<v-slide-group
  ref="slideGroup"
  v-if="!loading && myEducationsFiltered.length>0 && listType !== 'requested'"
  v-model="modelMyEdu"
  active-class="success"
  class="pa-4"
  show-arrows
>
  <v-slide-item
    v-for="(item,index) in myEducationsFiltered.slice(0, 7)"
    :key="index"
  >
    <course.........>
  </v-slide-item>
</v-slide-group>

在获取myEducationsFiltered的异步逻辑末尾添加调用：

// Vue2写法
// 数据赋值完成后
this.$nextTick(() => {
  this.$refs.slideGroup?.resize()
})

// Vue3写法
import { nextTick } from 'vue'
const slideGroup = ref(null)

// 数据赋值后
await nextTick()
slideGroup.value?.resize()

方案2：绑定动态key触发组件重渲染 #

给v-slide-group绑定和列表数据关联的key，数据更新后组件会重新挂载，自动触发内部计算：

<v-slide-group
  :key="myEducationsFiltered.length"
  v-if="!loading && myEducationsFiltered.length>0 && listType !== 'requested'"
  v-model="modelMyEdu"
  active-class="success"
  class="pa-4"
  show-arrows
>
<!-- 省略子元素代码 -->
</v-slide-group>

方案3：CSS强制控制箭头显示（不推荐，仅应急用） #

如果不想改动业务逻辑，可通过CSS强制控制箭头的显示逻辑，避免依赖组件内部计算：

/* 显示箭头 */
.v-slide-group__prev, .v-slide-group__next {
  display: flex !important;
}
/* 禁用状态下隐藏箭头 */
.v-slide-group__prev--disabled, .v-slide-group__next--disabled {
  display: none !important;
}

内容的提问来源于stack exchange，提问作者nsnclk