Question

我有一个布尔类型的属性-websiteHasCode，它从商店获取一个值。我想有条件地使用websiteHasCode（true或false）在页面中呈现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>

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

Answer 1

除非您要基于isCodeActive的值执行其他操作，否则对计算对象使用观察程序是没有意义的，只需直接在v-if中使用计算对象，就像这样：

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

<script>
    export default {
        name: "dashboard",
        props: [],
        data() {
            return {
                websiteHasCode: Boolean, // not sure why you're initializing with "Boolean" here, it should be false
            }
        },
        computed: {
          isCodeActive () {
            return this.$store.state.isCodeActive;
          }
        },
      }
</script>

此外，您正在将websiteHasCode属性初始化为“ Boolean”而不是false。可能是因为vue将此视为真实值，因此不会更新布局。

Vue.js：数据属性更改时组件未重新呈现

1 个答案: