我创建了一个表单,其中包含在此模块中发挥作用的以下字段。除 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;
}
},
任何帮助将不胜感激,因为我因为这个错误而感到非常沮丧。
最佳答案
正如 @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);
}
},
关于javascript - 为什么 v-model 不只适用于特定领域?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53303186/