v-if 조건이 계산된 속성에서 업데이트되지 않음

v-if 조건이 계산된 속성에서 업데이트되지 않음

해결(거의):삭제<div v-if="isFrameLoaded">src 데이터의 바인드<video>이제 요청 전송과 동시에 로드됩니다(데이터 없음).getBLOB그 후, 자동적으로 새로고침 됩니다(수동으로 파일을 보존할 필요는 없습니다.왜 이런 특이성이 있는지는 여전히 미스터리이다.v-if나한테는 안 통한다.여러분 감사합니다.

편집된 프레임표시하다

      //This is needed
<video v-bind:src="getBLOB"> 
           //Here too
    <source v-bind:src="getBLOB" type="video/mp4" />
    Your browser does not support the
</video>

---

편집:

state: {
...,
isFrameLoaded: false
}

스토어 콘텐츠에서 가져옵니다.js

getters:{
...,
isFrameLoaded: state => state.isFrameLoaded
}

돌연변이

mutations: {
...,
SAVE_ISFRAMELOADED(state, boolean) {
      state.isFrameLoaded = boolean;
      console.log("frame loaded");
    },
}

---

시도했던 것: 바인딩:key,this.$forceUpdate(),<keep-alive>

---

문제는 말이다<div v-if="isFrameLoaded">리소스가 다운로드되기 전에 체크됩니다(isFrameLoaded == false잠시 후 리소스가 다운로드되고 계산된 속성이 $store.getters에서 true로 반환됩니다.단, 상태를 갱신한 후에도 계산된 속성이 다시 호출되지 않습니다.

전에 만들어 본 적이 있는데 예상대로 작동해요.독특한 차이점은 집이라는 것이다.vue는 뷰와 프레임입니다.vue는 컴포넌트이며 $store가 작동합니다.

프레임은 동작하지 않습니다.표시하다

<template>
...
    <div v-if="isFrameLoaded">
        <video>
           <source v-bind:src="getBLOB" type="video/mp4" />
        </video>
    </div>
</template>
<script>
export default {
  computed: {
    isFrameLoaded() {
    //this is called just once
      console.log("isFrameLoaded()");
      return this.$store.getters["content/isFrameLoaded"];
    }
  }
};
</script>

이것은 홈에서 동작합니다.vue , "list"는 컴포넌트입니다.표시하다

<template>
...
    <template v-if="childDataLoaded">
        <list />
    </template>
</template>
<script>
export default {
  name: "Home",
  computed: {
    childDataLoaded() {
      return this.$store.getters["content/isThumbnailLoaded"];
    }
    }
  
};
</script>

여기서 isFrameLoaded가 contentstore.js로 변경됩니다.

getFrameBlob({ commit, state }) {
      commit("SAVE_ISFRAMELOADED", false); //HERE
      return contentService
        .getBigImg()
        .then(response => {
          var url = URL.createObjectURL(
            new Blob([response.data], { type: state.frame.mediaType })
          );
          commit("SAVE_CURRENTBLOB", url);
          commit("SAVE_ISFRAMELOADED", true); //HERE
          return url;
        });
    },

이 메서드는 동작하는 조건을 변경합니다(isThumbnailLoaded).

getThumbnails({ commit, state }) {
      commit("SAVE_ISTHUMBNAILLOADED", false); //HERE
      state.home.imgs.forEach((thumbnail, i) => {
        contentService
          .getThumbImg()
          .then(response => {
            var url = URL.createObjectURL(new Blob([response.data]));
            commit("SAVE_THUMBFRAME", {
              key: state.home.frames[i],
              value: url,
              like: state.home.likes[i]
            });
            if (state.thumbFrame.length == state.home.imgs.length) {
              commit("SAVE_ISTHUMBNAILLOADED", true); //HERE
            }
          });
      });
      return;

프레임에서 v-if를 삭제하면 알 수 있습니다.처음에 소스가 로드되지 않았습니다(이미지 타입은 항상 로드되지만 비디오 타입은 로드되지 않습니다). 그러나 실행 중에 프로젝트를 업데이트하고 저장하면 비디오 리소스도 로드됩니다.

그래서.. 힌트라도 있나요?nextTick() 함수는 읽었는데 너무 복잡한 것 같아서 실행 중에 프로젝트 파일을 수정하면 왜 문제가 해결되는지 궁금해요.

감사해요!

실제로 계산된 속성을 생성할 필요가 없습니다.스토어 게터가 이미 반응하고 있습니다.

계산 프로포트에서 getter를 래핑하는 방법은 계산 프로포트를 반응시키지 않습니다.계산된 속성과 마찬가지로 실제로 getter는 참조될 때 암묵적으로 실행되는 메서드이기 때문입니다.계산 프로펠을 실제로 로그에 기록하는 경우:

console.log('Getter: ', this.$store.getters["content/isThumbnailLoaded"]);

그러면 원하는 값이 아닌 메서드가 기록됩니다.

mapGetters를 사용하여 getter를 컴포넌트의 계산된 소품에 매핑할 수 있습니다.

import { mapGetters } from 'vuex';

  export default {
    computed: {
      ...mapGetters({
        isFrameLoaded: 'content/isFrameLoaded',
      }),
    }
  };

또는, 이 어프로치를 계속하는 경우는, 다음과 같이 할 수 있습니다.

export default {
  computed: {
    isFrameLoaded() {
      //this is called just once
      console.log("isFrameLoaded: ", this.$store.getters["content/isFrameLoaded"]());
      return this.$store.getters["content/isFrameLoaded"]();
    }
  }
};

저는 여전히 더 읽기 쉽고 깨끗한 첫 번째 방법을 사용할 것을 제안합니다.

안부 전해요.

언급URL : https://stackoverflow.com/questions/63854517/v-if-condition-not-updating-from-computed-property