2

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

问题是，我将这些值与我的输入绑定使用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,
    }
},
4

1 回答 1

9

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

默认情况下将其设为对象：

selectedItem: {},

Vue.set当您想要处理该对象时使用：

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

只需替换为对象中该属性的值之类的property东西。net_ratevalue

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

Vue.set 上的文档

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

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

于 2018-10-11T14:44:49.903 回答