v-модель не обновляет значение в реальном времени для определенного поля.Другие поля с таким же типом данных работают нормально.В чем дело?

Question

У меня есть конкретная модель, в которой есть несколько значений, которые можно обновить через форму, указанную на веб-странице.Значения похожи на «Количество», «Ставка», «Сумма», «Чистая ставка» и т. Д.

Проблема в том, что я связываю эти значения с моими входами, используя v-model, и он работает отличноидеально подходит для всех полей, кроме поля "net rate"!Он не обновляет значение в реальном времени, но когда я обновляю какое-либо значение в поле и нажимаю кнопку обновить в пользовательском интерфейсе Vue-devtools, оно обновляется!Он просто не обновляется, как только значение меняется в поле.И это тоже, для определенного поля с именем "net_rate"!

Я понятия не имею, что здесь происходит!Вот мой код, первое поле с идентификатором 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 в вашем свойстве данных, которое можно наблюдать .Но затем вы заменяете его на объект в вашей функции, и этот объект не наблюдается.Вы также можете сделать некоторую работу, чтобы сделать это наблюдаемым, или просто начать с Объекта по умолчанию, чтобы он уже наблюдался, затем используйте Vue.set, чтобы добавить свойства, которые становятся наблюдаемыми для этого объекта.

Сделать объект по умолчанию:

selectedItem: {}, 

Использовать Vue.set, если вы хотите работать с этим объектом:

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

Просто заменить property натакие вещи, как net_rate и value с любым значением этого свойства в объекте.

Теперь он будет реактивным и к нему будет прикреплен наблюдатель, поэтому значение будет корректно обновляться.

Документы на Vue.set

Примечаниеэта строка из документации здесь:

Vue не может обнаружить нормальные добавления свойств (например, this.myObject.newProperty = 'hi')