javascript - 为什么 v-model 不只适用于特定领域？

Question

我创建了一个表单，其中包含在此模块中发挥作用的以下字段。除 net_rate 外，所有变量均使用下面给出的列表中的 v-model 实时更新。

• 数量
• 评分
• 折扣
• 净利率

我正在从 API 获取产品信息，并在我的 data 中创建了一个 selectedItem: {} 对象。我可以使用 v-model 将所有这些字段与我的数据对象绑定(bind)，但 net_rate 除外。

我不知道这里出了什么问题，因为自过去 4 天以来我一直在尝试解决这个问题。但这里是您可能需要帮助我解决问题的所有信息和代码。

数据:

data () {
    return {
        selectedItem: {},
    }
},

使用 v-model 绑定(bind)进行标记

<div class="inline-form-group  col-sm-12 col-md-4 col-lg-1 text-right">
    <label for="quantity" style="color:teal;font-size:14px;">Qty.</label>
    <input type="text" ref="quantity" @input="setAmount()" @keydown.enter="$refs.rate.focus()" v-model="selectedItem.quantity" class="form-control text-right" />
</div>
<div class="inline-form-group col-sm-12 col-md-4 col-lg-1 text-right">
    <label for="cost" style="color:teal;font-size:14px;">Cost</label>
    <input type="text" ref="cost" disabled v-model="selectedItem.cost" class="form-control text-right" />
</div>
<div class="inline-form-group col-sm-12 col-md-4 col-lg-1 text-right">
    <label for="rate" style="color:teal;font-size:14px;">Rate</label>
    <input type="text" ref="rate" @keydown.enter="$refs.discount_perc.focus()" @input="setAmount()" v-model="selectedItem.price" class="form-control text-right" />
</div>
<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" @input="setAmount()" v-model="selectedItem.net_rate" class="form-control text-right" />
</div>

这里您可以忽略cost，因为它没有在任何地方使用。它是预定义的，不会在模块中更改。

请注意，所有其他变量(如 rate、discount_perc、quantity)均已成功绑定(bind)并正在运行。但只有 net_rate 字段不起作用。以下是此计算中使用的函数。

功能:

setAmount: function () {
    if(this.selectedItem.net_rate !== this.selectedItem.price){
        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;
    }
},

任何帮助将不胜感激，因为我因为这个错误而感到非常沮丧。

Answer 1

正如 @connexo 在评论中所述，

在对象上，Vue cannot detect changes of properties 。它只能检测对象本身的引用是否发生变化。这是由 Javascript 的性质决定的。而不是 obj.myProp = 10; 你需要做 Vue.set(obj, 'myProp', 10);

您需要执行以下操作:

setAmount: function () {
    if(this.selectedItem.net_rate !== this.selectedItem.price){
        var discount_percAmount = this.selectedItem.discount_perc?(this.selectedItem.discount_perc*this.selectedItem.price)/100:0;
        Vue.set(this.selectedItem, 'net_rate', this.selectedItem.price-discount_percAmount);
    }

    if(this.selectedItem.size_breadth > 0 && this.selectedItem.size_length > 0){
        Vue.set(this.selectedItem, 'item_amt', this.selectedItem.net_rate*this.selectedItem.quantity*this.selectedItem.size_breadth*this.selectedItem.size_length);
    } else {
        Vue.set(this.selectedItem, 'item_amt', this.selectedItem.net_rate*this.selectedItem.quantity);
    }
},