当 JavaScript 函数更新输入时，观察 Vue js 模型中的变化

Question

我现在使用日期范围选择器来选择日期，当我选择日期时，我分别用日期值更新输入。

我将输入与 v-model 绑定，并在组件的 watch 属性中创建了一个函数来观察模型的变化。

但是，当使用 javascript 函数更新输入时，模型中看不到任何变化，但我的输入字段的值已更新。

// My Input Fields

<input type="text" name="updateStartDate" v-model="updateDateRange.start">
 <input type="text" name="updateEndDate" v-model="updateDateRange.end">



//My javascript Function
$('input[rel=dateRangePickerX]').daterangepicker({
                        'autoApply': true,
                        'drops': 'up',
                        'startDate': moment().add(90, 'days').calendar(),
                        'endDate': moment().add(97, 'days').calendar(),
                        locale: { cancelLabel: 'Clear' }
                    },
                    function (start, end, label) {
                        $('input[name="updateStartDate"]').val(start.format('MM/DD/YYYY'));
                        $('input[name="updateEndDate"]').val(end.format('MM/DD/YYYY'));
                    });

// My watch attribute in Component
watch : {
        'updateDateRange.end' : function (val) {
            console.log('In Watch Function');
            console.log(this.dateRanges);
            if(val != '' && this.updateDateRange.start != '' && this.updateDateRangeIndex != ''){
                console.log(val);
                console.log(this.updateDateRange.start);
                console.log(this.updateDateRangeIndex);
                this.dateRanges[this.updateDateRangeIndex] = this.updateDateRange;
                this.updateDateRangeIndex = '';
                this.updateDateRange.start = '';
                this.updateDateRange.end = '';
                console.log(this.dateRanges);
            }
        }
    }

Answer 1

我不喜欢混合 jQuery 和 Vue，因为 jQuery 搞乱了 DOM。更重要的是，我觉得完全没有必要。

只需使用原生 Vue 就可以简单地做到这一点：

<input type="text" name="updateStartDate" v-model="startDate" @input="onInput()">
<input type="text" name="updateStartDate" v-model="endDate" @input="onInput()">

methods: {
   onInput(e): function () {
      // this will be called on change of value
   }
}

此外，要设置值并更新 DOM，只需更新startDate和/或endDate变量，DOM 将相应更新。