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>

Answer 1

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

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

这段代码里面：

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

Answer 2

showBanner

并不是真正的计算属性，它只是一个状态从三元初始化的变量。因此，您应该将其声明为

data

属性。

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

}

那么

this.showBanner = false;

就有意义了。

编辑更新了数据声明，因为您使用的是单文件组件。

Answer 3

那是因为您要返回一个值，而不是在

set

计算属性的

showBanner

方法中分配值。

尝试类似的事情

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

请记住，

set 

方法必须修改某些内容才能看到

showBanner

中的更改

https://v2.vuejs.org/v2/guide/compulated.html#Compulated-Setter