将 prop 值从父级传递给子级时的 v-model 值更新问题

Question

I am passing an object 'item' from parent to 'child' component. It works just fine. Please refer this .

As you change the values from dropdown, it updates the UI. My issue is that the same exact code does not work in my application (running locally on my machine). I even tried adding {{item.type}} in html, but it does not change (sticks to original value). One thing I noticed that, if I put @change='onChange' and printed the value in onChange method and it prints updated value.

Really unable to find solution to fix this. Any help would be great. Thanks.

Answer 1

The issue is you are adding the type property to your model after the item was already bound to data, and Vue cannot detect changes to properties added that way.

The fix is to make sure there is a type property on item ,

item: {
  "direct_sale_price": "",
  "is_auction": true,
  "is_tender": false,
  "type": null
}

or to properly add it using $set .

created: function () {
  if (this.item.is_auction) {
    this.$set(this.item, 'type', 'auction')
  } else if (this.item.direct_sale_price) {
    this.$set(this.item, 'type', 'direct-sale')
  } else if (this.item.is_tender) {
    this.$set(this.item, 'type', 'tender')
  } else {
    this.$set(this.item, 'type', 'plain')
  }
}