为什么Vue模型在input.val(value)时不更新？

Question

我有可编辑的表格：

<div id="myTable">
   <b-table class="overflow-auto" :items="filtered" :fields="visibleFields" :filter="filter">
        <template v-for="field in editableFields" v-slot:[`cell(${field.key})`]="{ item }">
            <b-input v-model="item[field.key]" placeholder="--" @@change="update" />
        </template>
    </b-table>
</div>

Vue 脚本（cdn）

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>


        new Vue({
            el: "#myTable",
            computed: {
                editableFields() {
                    return this.fields.filter(field => field.editable);
                },
                visibleFields() {
                    return this.fields.filter(field => field.visible)
                }
            },
            data: {
                filter: '',
                filtered: JSON.parse(`@Html.Raw(Model.SportBudgetsJson)`),
                fields: [
                    { key: 'Id', label: 'Id', visible: false },
                    { key: 'Field1', label: 'Field1', editable: true, visible: true, class: "percentageFormat pValue", thStyle: { width: "5%" } },
                    { key: 'Field2', label: 'Field2', editable: true, visible: true, class: "moneyFormat mValue", thStyle: { width: "10%" } },

                ]
            }
        });
...

以及用于格式化表中值的 js 函数：

 function formatValue(value, event, isPercent) {
     ... // returns value in ###.##% or $###,###.## format
     return formattedValue;
 }

 function copyValue(element, isPercent) { //update in % value if $'s value have changed and vise versa
     var selector = isPercent ? '.mValue' : '.pValue';
     var input = $(element).parent('td').parent('tr').children(selector).first().children('input');
     var value = element.value.replace(/[^\d]+/g, '');
     value = converValue([value.slice(0, -2), '.', value.slice(-2)].join(''), isPercent);
     $(input).val(formatValue(value, 'input', !isPercent));
 }

 function converValue(value, isPercent) {
     value = parseFloat(value);
     var totalBudget = parseFloat(`@Model.TotalBudget`);
     if (isPercent) {
         return parseFloat(totalBudget * (value / 100)).toFixed(2);
     }
     else {
         return parseFloat(value / totalBudget * 100).toFixed(2);
     }
 }
     
 $(document).ready(function () { // apply format events
     $('.moneyFormat input').each(function (index, el) {
         $(el).val(formatValue(el, "input", false));
         $(el).on("input change", function (event) {
             $(this).val(formatValue($(this).val(), event, false));
             if ($(el).parent('td').first().hasClass('mValue'))
                 copyValue(this, false);
         });
     });

     $('.percentageFormat input').each(function (index, el) {
         $(el).val(formatValue(this, "input", true));
         $(el).on("input change", function (event) {
             $(this).val(formatValue($(this).val(), event, true));
             if ($(el).parent('td').first().hasClass('pValue')) {
                 copyValue(this, true);
             }
         });
     });
 });

当我在表中使用 $(input).val(formatValue(value, 'input', !isPercent)) 值时，表中的值会更新，但 v-model 不会。 但是当我手动输入值时 - v-model 更新

我想实现实时值更新： 总金额 $100.00 Field1：从 12.00% 更改为 13.00%，因此 Field2 自动从 $12.00 更改为 $13.00

总金额 $100.00 Field2：从 $50.00 更改为 $45.00，因此 Field1 自动从 50.00% 更改为 45.00%

应计算这些值并将其粘贴到其输入中

如何将 v-model 更新为输入值？

Answer 1

JQuery 操作 DOM 不会自动更新 Vue 反应性数据绑定，因为 Vues 反应性系统依赖其自己的方法来检测数据更改。当您直接使用 jquery 操作 DOM 时，Vue 不会意识到这些更改。

function copyValue(element, isPercent) { 
    var selector = isPercent ? '.mValue' : '.pValue';
    var row = $(element).closest('tr'); 
    var input = row.find(selector).first().children('input');
    var value = element.value.replace(/[^\d]+/g, '');
    value = converValue([value.slice(0, -2), '.', value.slice(-2)].join(''), isPercent);
  
    var index = row.index(); 
    if (isPercent) {
  
        this.filtered[index].Field1 = value; 
    } else {
        this.filtered[index].Field2 = value; 
    }
    input.val(formatValue(value, 'input', !isPercent));
}