v-show를 사용하여 요소를 올바르게 렌더링하는 방법

v-show를 사용하여 요소를 올바르게 렌더링하는 방법

나는 사용자가 아코디언 메뉴를 열 때만 보여주는 회전목마를 가지고 있다.

나는 회전목마가 열릴 때까지 숨기기 위해 v-show를 사용하고 있다.그러나 브라우저 창의 크기를 조정하지 않는 한 회전목마를 올바르게 렌더링하지 않는다. 첫 번째 슬라이드는 표시되지만 다른 슬라이드를 클릭하는 것은 표시되지 않는다.

로딩 시 웹 검사 프로그램translate: transform()브라우저 창의 크기가 조정될 때까지 슬라이드의 경우 비우십시오.

이건 v-show랑 DOM에서 렌더링하는 거랑 관련이 있는 것 같아..$nextTick또는.$watch비슷한 문제를 고치려고 하지만 내 코드에 적용할 만큼 충분히 이해되지 않는다.

v-show를 사용하여 이 문제를 해결할 수 있는 방법이 있는가?.nextTick()또는.watch()?

<div :key="project.id">
  <!-- project header -->
  <li
    class="project accordion columns is-flex vcenter"
    @click="toggleItem"
    style="margin-left: 0; margin-right: 0;"
  >
    <h3 class="project-title column is-one-quarter">{{ project.Name }}</h3>
    <h4 class="project-summary column is-two-thirds">
      {{ project.Summary }}
    </h4>
    <span class="column is-one-half is-gapless project-icon">
    <img
      src="../static/SVG/Circle.svg"
      alt="circle icon for branding & identity"
    />
  </span>
</li>

내 숨겨진 콘텐츠가 여기에 있어 아코디언이 열려 있을 때만v-show.

<div class="showcase-content columns" v-show="show">
  <p class="project-description column is-one-third">
    {{ project.Description }}
  </p>
  <agile :fade="true">
    <div
      class="image-box column is-two-thirds"
      v-for="image in project.image"
      :key="image.url"
    >
      <img :src="buildImageUrl(image.url)" alt="" />
    </div>
  </agile>
</div>

EDIT I는 원래 내 아코디언을 주입하고 있었고, 아코디언과 내 코드를 리팩터링했는데, 주사가 반응하지 않을 수도 있지만 동일한 문제가 지속된다는 의심에 대해서였다.이 문제에 대한 코드는 나의 현재 코드다.

<script>
export default {
  name: 'ProjectItem',
  data: function () {
    return {
      show: false,
    }
  },
  props: ['project'],
  methods: {
    toggleItem: function () {
      this.show = !this.show
    },
    buildImageUrl(image) {
      if (!image) return '../static/images/SamB.png'
      return `http://localhost:1337${image}`
    },
  },
}
</script>

참고: 비슷한 문제를 가진 모든 사람에게 유용할 수 있으므로 답의 이 부분을 그대로 두십시오. 그러나 질문이 슬라이더 라이브러리를 지정하지 않았을 때 추가되었다. 실제 답변을 읽으려면 구분 기호 뒤로 건너뛰십시오.

• 사용.v-show회전목마에는 다음이 있다.display: none
• 대부분의 회전목마는 슬라이드의 크기를 설정할 때init-edded and they update onwindow.resize

그 말은 당신의 회전목마는init의 높이로 -ing0그리고 그것은 단지 재조정될 뿐이다.window.resize, 로의 변화에 관계없이.display당신의 소유물v-show원소의

빠르고 더러운 해결책은 트리거하는 것이다.window.resize부동산이 통제할 때v-show변화들즉,

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

하지만 그것은 지저분하고 또한 비용이 많이 들 수도 있다. 다른 요소/도서관이 듣고 있는 것에 따라.resize.

훨씬 더 좋은 해결책은 무엇이든 부르는 것이다.updatecarousel 라이브러리가 노출될 때v-show형세가 변하다
어떻게 해야 할지 모르겠으면, 질문에 회전목마 라이브러리를 추가하는 것을 추천한다.

또 다른 잠재적인 문제는 회전목마의 용기가 애니메이션화 되어 있는 경우(즉, 회전목마에 어떤 종류의 변환을 사용하는 경우)이다.이 경우 트리거링해야 함window.resize/carousel.update용기의 크기가 올바른 경우, 애니메이션의 마지막에.그래서 미니멀을 재현할 수 있는 예를 제공하는 것이 이상적이었을 것이다.
그 문제에 대한 빠르고 더러운 해결책은 a를 추가하는 것이다.transitionend애니메이션 요소와 디스패치의 청취자.window.resize더 이상 아무것도 필요 없는 콜백에 말이야또, 실제로 수표를 붙이곤 했다.v-show조건만 있고 파견은 파견window.resize때가 되면true하지만, 다시 말하지만, 그것은 정말 깨끗하지 않고 부작용이 있을 수 있다.

---

편집: 사용하기 때문에vue-agile설명서에서 답변한 질문:

사용도 가능하다.v-show, 그러나 당신은 그것을 사용해야 한다.reload()방법의

그 말은 이렇게 하면 된다는 뜻이지

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

...

methods: {
  toggleItem: function () {
    this.show = !this.show;
    this.$nextTick(() => this.$refs.slider.reload());
  }
  ...
}

여기서 작업하는 예.

---

참고: 교체v-show와 함께v-if조건이 바뀔 때마다 회전목마가 DOM에서 추가 및 제거된다는 것을 의미하기 때문에 비싼 솔루션이다.매번 자체적으로 재구축하고 슬라이더 이미지를 다시 로드한다.그것보다 더 나쁘다.v-show+window.resize해결책

참고: Swiper가 Sliff보다 낫기 때문에 Swiper용 vue 포장지를 보는 것이 좋을 것이다.

참조URL: https://stackoverflow.com/questions/62161952/how-do-i-render-my-element-using-v-show-correctly