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

a6b3iqyw 于 2022-12-14 发布在 Vue.js

关注(0)|答案(3)|浏览(103)

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

vue.js

来源：https://stackoverflow.com/questions/47599684/vuejs-changing-a-computed-property-via-a-method

3条答案

按热度按时间

snvhrwxg1#

您可以在代码中使用&&运算符来修复“text is undefined”错误

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

在此代码中：

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

赞(0）回复(0）举报 2022-12-14

x759pob22#

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

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

}

那么this.showBanner = false;就说得通了。

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

赞(0）回复(0）举报 2022-12-14

nfs0ujit3#

这是因为在showBanner计算属性的set方法中返回的是一个值，而不是赋值。
尝试以下内容

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

请记住，set方法必须修改某些内容，才能看到showBanner中的更改
https://v2.vuejs.org/v2/guide/computed.html#Computed-Setter

赞(0）回复(0）举报 2022-12-14

我来回答

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

3条答案

相关问题

热门标签

最新问答