환경

Vue.js 2.6.11
Rails 6.1.3

수정할 부분

질문의 해결 상태를 나타내는 스테이터스 블록과 답변수가 주위에 비해 조금 늦게 표시되어 버리고 있습니다.
이대로라면 조금 기분 나쁘기 때문에 같은 타이밍에 표시되도록 수정합니다.
또한, 페이지 네이트의 < > 붙어 있기 때문에 그것도 해소하려고 생각합니다.

구성

질문 카드의 구성은
QuestionBase.vue
---QuestionCommetnsCount.vue
---QuestionStatus.vue
그리고 상태 블록과 답변의 일부는 주위에 자식 요소입니다.

또한, 스테이터스 부분의 판정은,
①axios에서 각 질문에 최선의 답변이 있는지를 axios로 취득
②있으면 bestAnswer에 대입, 없으면 에러로 분기
③v-if로 bestAnswer가 있으면 해결이 끝나고, 없으면 응답 접수중을 표시
되어 있습니다.

QuestionStatus.vue

<template>
  <div>
    <div
      v-if="bestAnswer"
    >
      解決済
    </div>
    <div v-else>
      回答受付中
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  props: ["question"],
  data: function () {
    return {
      bestAnswer: "",
    };
  },
  created() {
    axios
      .get(`/api/v1/bestanswer/${this.question.id}`)
      .then((response) => {
        this.bestAnswer = response.data;
        console.log(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>

왜 표시 타이밍이 어긋나는가?

라이프 사이클을 확인해 봅니다.



부모 요소의 mount가 끝나고 나서, 아이 요소의 created가 시작되고 있는 것을 확인할 수 있었습니다.
이로 인해 표시 시간 차이가 발생하는 것 같습니다.

해결 방법

주위에 비해 표시가 지연됨

emit을 사용하여 자식 요소의 created가 끝난 시점에서 부모 요소에 각각 true를 전달합니다.
둘 다 정렬된 타이밍에서 동시에 렌더링됩니다.

또 여기서 v-if를 사용하면 원래 자식 요소의 created가 행해지지 않고 표시가 되지 않게 되므로 주의입니다.
(내부 자식 요소도 작동하지 않기 때문에)

QuestionCommetnsCount.vue

<script>
...
created() {
    axios.get(`/api/v1/comments_count/${this.question}`).then((response) => {
      this.count = response.data;
      this.$emit("isCountCreated", true);
    });
</script>

QuestionStatus.vue

<script>
...
created() {
    axios.get(`/api/v1/bestanswer/${this.question.id}`).then((response) => {
      this.bestAnswer = response.data;
      this.$emit("isStatusCreated", true);
    });
</script>

QuestionBase.vue

<template>
  <div v-show="isCountCreated && isStatusCreated">
...
</template>

상태가 표시되면 전환

질문 스테이터스가, 해결된 것도 일순간 「해답 접수중」이 표시되고 나서 「해결제」로 전환되고 있었습니다.
이와 관련하여 위의 해결 방법과 마찬가지로 axios

this.isStatusCreated = true

넣어 두십시오.

<div v-if="isStatusCreated">

로 해두면 해결입니다.