Question

我正在尝试调整方法内的vue组件中的计算属性。当此属性更改时，我正在尝试显示/隐藏div。目前，当我执行click事件时，我在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

这是因为您正在返回一个值，而不是在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

Answer 2

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

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

}

然后this.showBanner = false;才有意义。

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

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

2 个答案: