使用 boolean 道具的 VueJS 计算属性未更新

Question

I have a Vue (2.6.11 via Nuxt) component that gets a Boolean property from its parent and uses it to calculate additional computed properties. After the initial rendering all values are shown as expected. However, when a parent flips the value of the passed-down property, only some values change in this component. Specifically DIVs bound directly to the property and original are both fine, but flipped and stringed never change again.

Assigning the original property to a local var before any evaluation within the computed property function makes no difference in the outcome.

Changing computed properties to methods doesn't solve the issue either. It is still just the first two that update properly.

Note that the code below is stripped to a bare minimum to demonstrate the issue.

<template>
  <div class="x">
    <div class="y">
      <div class="x">
        <div>{{ flag }}</div>
      </div>
      <div class="x">  
        <div>{{ original }}</div>
      </div>  
      <div class="x">  
        <div>{{ flipped }}</div>
      </div>  
      <div class="x">  
        <div>{{ stringed }}</div>
      </div>  
    </div> 
  </div>    
</template>

<script>
export default {
  name: "FlagBox",
  props: { 
    "flag": {
      type: Boolean
    }
  },
  computed: {
    original: function() {
      return this.flag;
    },
    flipped: function() {
      return !this.flag;
    },
    stringed: function() {
      return this.flag ? "yes" : "no";
    }
  }
}
</script>

What am I missing? Thanks.

Answer 1

I was not able to reproduce the issue but my best guess is that the radio button you are using is emitting a string value (eg, "false" instead of false) which is causing it to be true even when it's not. Please check your props using the vue devtools to verify the data type being passed. There is no other possible explanation for this, the code seems fine.