programing

계산된 속성이 두 번 반환됨

copysource 2022. 8. 10. 21:08
반응형

계산된 속성이 두 번 반환됨

, 풀네임 이니셜이 됩니다.undefined, .

    computed: {
        user: function () {
            console.log(this.$store.state.user.name);
            //return this.$store.state.username.match(/[A-Z]/g).slice(0, 2).join('');
        }
    }

여기에 이미지 설명 입력

불리지 않는match풀네임이 렌더링되지 않는 한 기능합니까?

계산된 속성이 두 번 실행되는 방법은 앱이 생성될 때 한 번 실행되며, 데이터가 업데이트되면 두 번 실행됩니다.

이 문제를 해결하는 가장 좋은 방법은 데이터가 어디에 있든지 간에 다음과 같이 계산된 속성을 변경하여 데이터가 있는지 확인하는 방법은 다음과 같습니다.

if(this.$store.state.user.name) return this.$store.state.user.name

또는 계산된 속성을 템플릿에 배치하는 경우 다음과 같은 경우 v-if를 사용합니다.

v-if="$store.state.user.name"

옵션 체인을 사용하여 반환문 내에서 정의되지 않은 사례를 처리할 수 있습니다.

MDN

  computed: {
    user: function () {
      return this.$store.state?.user?.name?.match(/[A-Z]/g).slice(0, 2).join('');
    }
  }

언급URL : https://stackoverflow.com/questions/61772157/computed-property-get-returned-twice

반응형