Vuejs：数据属性更改时组件不重新渲染

Question

我有一个布尔类型的属性 - websiteHasCode，它从商店中获取一个值。我想有条件地使用 websiteHasCode（true 或 false）在页面中呈现 html，最初组件 A 很好（websiteHasCode 的正确值）。页面中有一个模态，它是组件A的子组件B，模态具有更新存储值的功能-isCodeActive。所以当它更新时我希望变量 websiteHasCode 也更新并最终更新 Dom，所以我使用了一个观察者并按照这个 SO 问题进行了计算，但它似乎没有更新。谁能帮助我在这里做错了什么？<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 将其视为真实值，因此不会更新布局。