vuejs - 메서드를 통해 계산된 속성 변경

vuejs - 메서드를 통해 계산된 속성 변경

메서드 내의 vue 컴포넌트 내에서 계산된 속성을 조정하려고 합니다.이 속성이 변경될 때 다음 항목을 표시하거나 숨기려고 합니다.div현재 클릭 이벤트를 실행하면 올바른 부울로그가 표시됩니다.set기능하고 있습니다만, 에의 변경은 없습니다.showBanner소품

여기가 내가 있는 곳이야.

HTML

<template>
  <div v-if="someConfig.displayBanner && showBanner" class="bn-banner">
    {{showBanner}}
  </div>
</template>


<script>
  import { mapActions, mapState } from 'vuex';

  export default{

    name: "myComponentShell",

    computed: {
      ...mapState('utilitiesStore', [
        'someConfig'
        ]),

        styleObject () {
          return {
            background: this.someConfig.colorHex
          }
        },

    showBanner:{

      get () {
        return (this.someConfig.text === localStorage.getItem("gma_alerts_hide")) ? false : true
      },

      set (value) {
        console.log(value)
        return value
      }
    }


    },

    methods: {
      ...mapActions('utilitiesStore', [
          'getJSON'
        ]),

        closeBreaking () {
          localStorage.setItem("someData", this.someConfig.text)
          this.showBanner = false;
        }
    },

  }

</script>

showBanner는 진정으로 계산된 속성이 아니며, 단순히 3진수에서 초기화된 변수입니다.따라서, 당신은 그것을 단지 선언해야 합니다.data소유물.

data () {
    return {
        showBanner: (this.someConfig.text === localStorage.getItem("gma_alerts_hide")) ? false : true
    }

}

그리고나서this.showBanner = false;말이 되네.

단일 파일 구성 요소를 사용 중이므로 업데이트된 데이터 선언을 편집하십시오.

코드에서 & 연산자를 사용하여 "text is defined" 오류를 수정할 수 있습니다.

(this.someConfig && this.someConfig.text)

이 코드 내:

data () {
return {
    showBanner: (this.someConfig.text === localStorage.getItem("gma_alerts_hide")) ? false : true
}}

그 이유는 사용자가 값을 할당하는 대신 값을 반환하기 때문입니다.set의 방법showBanner계산 속성

이런 걸 해 봐

set (value) {
  this.someConfig.text = value; // I assign a value so get() method will trigger
}

주의해 주세요set메서드는 변경을 확인하기 위해 무언가를 수정해야 합니다.showBanner

https://vuejs.org/v2/guide/computed.html#Computed-Setter

언급URL : https://stackoverflow.com/questions/47599684/vuejs-changing-a-computed-property-via-a-method