Javascript 如何正确使用v-show渲染元素？

我有一个旋转木马，只有当用户打开我的手风琴菜单时才会显示

我正在使用v-show隐藏旋转木马，直到它被打开。但是，除非我调整浏览器窗口的大小，否则它不会正确渲染旋转木马，第一张幻灯片显示，但单击其他幻灯片不会显示

Web inspect在加载时为幻灯片显示

translate:transform（）

空，直到调整浏览器窗口的大小

我认为这与v-show以及它在DOM中的呈现方式有关，我见过有人使用

$nextTick

或

$watch

来解决类似的问题，但我不太了解它们，无法将它们应用到我的代码中

对于我来说，有没有办法使用v-show和

.nextTick（）

或

.watch（）

解决这个问题

{{project.Name}
{{project.Summary}

我的隐藏内容在这里，它仅在手风琴打开时使用

v-show

显示

{{project.Description}}

编辑我最初是将我的手风琴注入，并重构了手风琴和我的代码，怀疑注入可能不是反应性的，但同样的问题仍然存在。这个问题的代码是我当前的代码

导出默认值{
名称：“项目项”，
数据：函数（）{
返回{
秀:假,，
}
},
道具：[“项目”]，
方法：{
toggleItem:函数（）{
this.show=！this.show
},
buildImageUrl（图像）{
如果（！image）返回“../static/images/SamB.png”
返回`http://localhost:1337${image}`
},
},
}

注意：保留答案的这一部分，因为它可能对任何有类似问题的人都有用。但是，它是在问题没有指定滑块库时添加的。要阅读实际答案，请跳到分隔符后面

• 使用

  v-show

  表示旋转木马使用

  显示：无

• 大多数旋转木马在

  init

  -ed时都会设置幻灯片的大小，并在

  窗口中更新。调整大小

这意味着您的旋转木马是

init

-ing，高度为

0

。它只会在

窗口上重新调整。调整大小

，而不管

v-show

元素的

display

属性如何更改

一个快速而肮脏的修复方法是触发

窗口。当控制
v-show
的属性更改时，调整其大小。即：

toggleItem: function () {
  this.show = !this.show;
  window.dispatchEvent(new Event('resize'));
},

但是它很脏而且可能很昂贵，这取决于其他组件/库正在侦听的
调整大小

更好的解决方案是在
v-show
条件更改时调用您的旋转木马库公开的任何
update
方法。

如果您不知道如何做到这一点，我建议在问题中添加carousel库（带版本）

另一个潜在问题是旋转木马的容器是否设置了动画（即：在其上使用某种类型的转换）。在这种情况下，当容器大小正确时，需要在动画结束时触发
窗口。调整大小
/
旋转木马。更新。这就是为什么提供一个理想的解决方案。

对于这个问题，另一个快速而肮脏的解决方案是在动画元素上添加一个
transitionend
侦听器，并在该回调中分派
window.resize
，在这种情况下，您不再需要任何其他内容。此外，我实际上会在
v-show
条件上进行检查，并且仅在
窗口为true时调整其大小。但是，它也不是很干净，可能有副作用


编辑：由于您使用了
vue agile
，以下是您的问题：

也可以使用
v-show
，但必须使用
reload（）
方法

这意味着这应该做到：

<template>
   <agile ref="slider" ... />
</template>

一个有效的例子


注意：将
v-show
替换为
v-if
是一个昂贵的解决方案，因为这意味着每次条件改变时，您的旋转木马都会从DOM中添加和删除。每次它都会重建自身并重新加载滑块图像。这比
v-show
+
窗口更糟糕。调整大小
解决方案

注意：您可能想看一下，因为（可以说）Swiper比Slick好。
您能详细说明一下“它没有正确渲染旋转木马”-以什么方式吗？第一张幻灯片显示正常，但点击第二张幻灯片时显示不正确，如果我一直点击屏幕，屏幕上的一半幻灯片和其他幻灯片都会显示为空。我使用了web inspect，在我调整浏览器窗口大小之前，Translate似乎是0/空的，然后所有幻灯片在点击过程中都正常显示。“是四分之一”、“是三分之二”和“是一半”加起来应该是全宽吗？我不认为这是个问题，我的理解是，这些类名定义了其容器中列的宽度。在对一个div使用“is one quarter”之后，当对另一个div声明“is two Threed”时，它将使用剩余空间的三分之二，然后“is half”将使用剩余空间的一半。我可能是错的，因为我也是Bulma框架的新手。你的问题没有答案是不能回答的。您必须至少指出所使用的确切的转盘库，并提供测试任何潜在解决方案的方法。这非常有效。非常感谢您花时间设置代码盒示例并深入解释发生了什么以及为什么它不起作用。我真的很感谢你的帮助，希望你周末过得愉快！
methods: {
  toggleItem: function () {
    this.show = !this.show;
    this.$nextTick(() => this.$refs.slider.reload());
  }
  ...
}