Vuejs :数据属性更改时组件不会重新呈现

admin

我有一个Boolean - websiteHasCode类型的属性，它从存储中获取一个值。我想使用websiteHasCode (真或假)在页面中有条件地呈现html，最初组件A是好的( websiteHasCode的正确值)。在页面中有一个模态，它是组件A的子组件B，该模态具有更新存储值的功能- isCodeActive。所以当它更新时，我希望变量websiteHasCode也更新，并最终更新Dom，所以我使用了一个监视器，并像this SO question一样计算，但它似乎没有更新。有人能帮我解决这里的错误吗？

<template> 
  <div>
    <div v-if="websiteHasCode">
          ...............
    </div>
    <div v-else>
          ................
    </div>
  </div>
</template>


<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean,
            }
        },
        mounted() {
            this.websiteHasCode = this.$store.state.isCodeActive;
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
        watch: {
          isCodeActive: {
            handler() {
              console.log(this.websiteHasCode) // returns false
              this.websiteHasCode = this.$store.state.isCodeActive;
              console.log(this.websiteHasCode) // returns true but dom does not re-render
            },
            deep: true
          },
        },
      }
</script>

这是观察状态变化的最好方法吗，还有更好的方法吗？

转载请注明出处:http://www.intsu.net/article/20230515/1044763.html