vue js传递“top-level”布尔值不起作用，只嵌套

Question

This is weird. When I define the Boolean property showModal at the top level it is simply being ignored by vue.js. Here's what I am doing:

//Component:
export default {
  props:['rating', 'showModal'],
  data: function data () {
    return {
      rating: this.rating,
      showModal: this.showModal
    };
  }
};

Invoking the view:

const sharedRating = {
  title: '',
  remark: ''
};

let showModal = false;

new Vue({
  el: '#rating-edit-container',
  data: {
    showModal: showModal,
    rating: sharedRating
  }
});

showModal = true;

Then both values are being passed to the component:

  <rating-edit
    :rating="rating"
    :show-modal="showModal"></rating-edit>

But when I change the value of showModal nothing happens.

If I pass showModal inside the rating object and use that nested property everything works fine:

const sharedRating = {
  showModal: false,
  title: '',
  remark: ''
};

new Vue({
  el: '#rating-edit-container',
  data: {
    rating: sharedRating
  }
});

sharedRating.showModal = true;

Shouldn't "stand alone" boolean properties also be working in Vue or do they always need to be "wrapped"?

Answer 1

Well, first of all, I'm not sure what is happening in your component because you are naming a property and a data value with the same name. Without testing, I'm not sure which one wins, but it looks like it is the data property. You should not name a property and a data value the same thing. The property will always be available to you.

When you define your data function in a component, it's also important to remember that the data function is only ever called when the component is created . Where you set

showModal: this.showModal

(disregarding for a moment what I said above about this not being a good idea) showModal the data property is only ever set once . It will never be updated unless you update it inside the component. It will not receive changes to the property showModal .

If you wanted the component to get updates to showModal from the outside and for changes to showModal in the component be relfected outside the component, you need to handle this a little differently.

Vue components are composed in a props down, events up structure.

export default {
  props:['rating', 'showModal'],
  data: function data () {
    return {
      rating: this.rating,
    };
  }, 
  computed:{
    show:{
      get(){ return this.showModal; }
      set(v){ this.$emit('input', v) }
    }
  }
};

And then modify the way you use it in your template:

rating-edit
  :rating="rating"
  v-model="showModal"></rating-edit>

Writing your component in this fashion, any update to showModal outside the component will be reflected inside the component as show , and any change to show inside the component will be emitted to the parent. Then because v-model listens to input events, showModal in the parent will be updated with the new value.

Now you may be asking at this point, but why does it work when showModal is a property of an object?

When you are passing the object down from the top level into your component, outside your Vue, your root Vue, and your component are all working with the same object. Any change to the showModal property from any of those places will be reflected in all of those places. If however, you were to update showModal by making a new sharedRating object, you would see similar behavior to what you see when you use a boolean. Properties in Vue are immutable which means that any change you make to a primitive javascript value (string, number, boolean, etc) will not be reflected outside the component, and in fact Vue will throw a warning about doing that if you are using the development version. Objects and arrays, however, in javascript, are passed by reference. The reference is immutable, but the properties of the object and the contents of an array can be changed.