Vuejs : 데이터 속성 변경 시 컴포넌트가 재렌더되지 않음

Vuejs : 데이터 속성 변경 시 컴포넌트가 재렌더되지 않음

Boolean - websiteHasCode 유형의 속성이 있으며, 이 속성은 스토어에서 값을 가져옵니다.웹 사이트 HasCode(true 또는 false)를 사용하여 페이지의 html을 조건부로 렌더링합니다.초기 컴포넌트 A는 정상입니다(website HasCode의 올바른 값).페이지에 모달(컴포넌트 A의 하위 컴포넌트 B)이 있습니다.모달에는 스토어 값 isCodeActive를 갱신하는 기능이 있습니다.그래서 업데이트 할 때 변수 웹사이트 HasCode도 업데이트하고 최종적으로 돔도 업데이트 하고 싶어서 워처를 사용하여 SO 질문처럼 계산했는데 업데이트가 되지 않는 것 같습니다.내가 틀렸던 걸 누가 도와줄 수 있어?

<template> 
  <div>
    <div v-if="websiteHasCode">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>


<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean,
            }
        },
        mounted() {
            this.websiteHasCode = this.$store.state.isCodeActive;
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
        watch: {
          isCodeActive: {
            handler() {
              console.log(this.websiteHasCode) // returns false
              this.websiteHasCode = this.$store.state.isCodeActive;
              console.log(this.websiteHasCode) // returns true but dom does not re-render
            },
            deep: true
          },
        },
      }
</script>

또한 이것은 상태 변화를 볼 수 있는 가장 좋은 방법입니까, 더 나은 방법은 없습니까?

isCodeActive 값을 기반으로 다른 작업을 수행하려는 경우 계산 작업에 워처를 사용하는 것이 의미가 없습니다. 다음과 같이 v-에서 직접 계산 작업을 사용하십시오.

<template> 
  <div>
    <div v-if="isCodeActive">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>
    

<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean, // not sure why you're initializing with "Boolean" here, it should be false
            }
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
      }
</script>

또한 웹 사이트 HasCode 속성을 false가 아닌 Boolean으로 초기화합니다.vue가 이 값을 일반적인 값으로 보고 레이아웃을 업데이트하지 않을 수 있습니다.

언급URL : https://stackoverflow.com/questions/63776657/vuejs-component-not-re-rendering-when-a-data-property-changes