vuejs - 通过方法更改计算属性

Question

我正在尝试在方法内调整 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>

原文由 gregdevs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在代码中使用 && 运算符来修复“文本未定义”错误

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

在这段代码中：

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

原文由 ElsaKarami 发布，翻译遵循 CC BY-SA 4.0 许可协议