v-model 不会实时更新特定字段的值。具有相同数据类型的其他字段工作正常。怎么了？

Question

我有一个特定的模型，其中有多个值可以通过网页上给出的表单进行更新。值如“数量”、“费率”、“金额”、“净费率”等。

问题是，我将这些值与我的输入绑定在一起v-model，它对除“净利率”字段之外的所有字段都非常完美！它不是实时更新值，但是当我更新字段中的某些值并在 Vue-devtools UI 上单击刷新时，它会更新！只要字段中的值发生变化，它就不会立即更新。而且，对于称为“net_rate”的特定字段！

我不知道这里发生了什么！这是我的代码，带有 id 的第一个字段discount_perc工作正常！当我更新此字段中的任何内容时，只要我在该字段中编辑值，它就会更新。但同样的事情并没有发生在这个net_rate领域。

<div class="inline-form-group col-sm-12 col-md-4 col-lg-1 text-right">
    <label for="discount_perc" style="color:teal;font-size:14px;">Dis %</label>
    <input type="text" ref="discount_perc" @keydown.enter="$refs.net_rate.focus()" @input="setAmount()" v-model="selectedItem.discount_perc" class="form-control text-right" />
</div>
<div class="inline-form-group col-sm-12 col-md-4 col-lg-1 text-right">
    <label for="net_rate" style="color:teal;font-size:14px;">Net rate</label>
    <input type="text" ref="net_rate" v-model="selectedItem.net_rate" @input="updateAmount()" @keydown.enter="addItem()" @keydown.tab="addItem()" class="form-control text-right" />
</div>

这是我针对这两个字段的输入事件触发的方法。

setAmount: function () {
    var discount_percAmount = this.selectedItem.discount_perc?(this.selectedItem.discount_perc*this.selectedItem.price)/100:0;
    this.selectedItem.net_rate = this.selectedItem.price-discount_percAmount;

    if(this.selectedItem.size_breadth > 0 && this.selectedItem.size_length > 0){
        this.selectedItem.item_amt = this.selectedItem.net_rate*this.selectedItem.quantity*this.selectedItem.size_breadth*this.selectedItem.size_length;
    } else {
        this.selectedItem.item_amt = this.selectedItem.net_rate*this.selectedItem.quantity;
    }
},
updateAmount: function () {
    if(this.selectedItem.size_breadth > 0 && this.selectedItem.size_length > 0){
        this.selectedItem.item_amt = parseFloat(this.selectedItem.net_rate)*this.selectedItem.quantity*this.selectedItem.size_breadth*this.selectedItem.size_length;
    } else {
        this.selectedItem.item_amt = parseFloat(this.selectedItem.net_rate)*this.selectedItem.quantity;
    }
},

我知道有一段多余的代码可以转换成方法，我稍后会处理，现在，我的首要任务是让这件事工作。

我尝试net_rate在updateAmount()函数中进行警报值计算并且它有效。但它没有更新模型中的值。它需要刷新！超过 24 小时以来，我一直在挠头，但无法解决问题。

有没有人遇到过同样的问题？请告诉我原因和可能的解决方案！任何形式的帮助将不胜感激！

更新：这是我的数据。

data () {
    return {
        availableParties:[],
        party: [],
        availableArchitechs: [],
        availableStaff: [],
        availableLocations: [],
        location: '',
        availableItemCodes: [],
        selectedItem: [],
        quotation: {
            party_id: null, date:new Date().toISOString().split('T')[0], architech: '',staff: '', items: [], order_no: '',
            item_amt: 0,gst_0_amt:0,gst_5_amt:0,gst_12_amt:0,gst_18_amt:0,gst_28_amt:0,final_amt:0
        },
        latestQuotation: [],
        partySpecificItemInfo:{
            rate: 0,
            discount_perc: 0,
            net_rate: 0
        },
        updateAllowed: true,
        selectedItemImageExist: false,
    }
},

Answer 1

这里的问题是您在 VueJS 中的 data 属性中初始化了一个 Array ，它是 observable。但是然后你在你的函数中用一个 Object 替换它，并且那个 Object 是不可观察的。您也可以做一些工作来使该对象可观察，或者仅从默认情况下从一个对象开始，这样它就已经是可观察的，然后用于Vue.set添加可对该对象变得可观察的属性。

使其成为默认对象：

selectedItem: {}, 

使用Vue.set时，要对该对象的工作：

Vue.set(this.selectedItem, 'property', value)

只需更换property的东西一样net_rate，并value与任何应在对象属性的值。

现在它将是反应式的，并将观察者附加到它，因此该值将正确更新。

Vue.set 上的文档

请注意此处文档中的这一行：

Vue 无法检测正常的属性添加（例如 this.myObject.newProperty = 'hi'）