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

Question

我正在传递一个物品＆＃39;从父母到孩子＆＃39;零件。它工作得很好。请参阅this。

当您从下拉列表中更改值时，它会更新UI。我的问题是，相同的代码在我的应用程序中不起作用（在我的机器上本地运行）。我甚至尝试在html中添加{{item.type}}，但它没有改变（坚持原始值）。有一点我注意到，如果我放置@change='onChange'并在onChange方法中打印该值并打印更新的值。

真的无法找到解决方法来解决这个问题。任何帮助都会很棒。谢谢。

Answer 1

问题是，在项目已绑定到数据后，您将type属性添加到模型中，并且Vue cannot detect changes添加到属性中的属性。

修复方法是确保type上有item属性，

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

或使用$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')
  }
}