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

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

我用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);
            }
        }
    }

//我的输入字段
//我的javascript函数
$（'input[rel=dateRangePickerX]'）。daterangepicker({
“自动应用”：true，
“drops”：“up”，
'startDate'：矩（）.add（90，'days'）.calendar（），
“endDate”：矩（）.add（97，“天”）.calendar（），
区域设置：{cancelabel:'Clear'}
},
功能（开始、结束、标签）{
$（'input[name=“updateStartDate”]'）.val（start.format（'MM/DD/YYYY'）；
$（'input[name=“updateEndDate”]'）.val（end.format（'MM/DD/YYYY'）；
});
//组件中的“我的手表”属性
观察：{
'UpdateDataRange.end'：函数（val）{
console.log（'In Watch Function'）；
console.log（this.dateRanges）；
如果（val！=''&&this.updatedTerange.start！=''&&this.updatedTerangeIndex！=''）{
控制台日志（val）；
log（this.updateDatarange.start）；
log（this.updatedTerangeIndex）；
this.dateRanges[this.updatedTerangeIndex]=this.updatedTerange；
this.updatedTerangeIndex=''；
this.updateDataRange.start=''；
this.updateDataRange.end=''；
console.log（this.dateRanges）；
}
}
}

您需要使用您的模型，而不是摆弄绑定的DOM元素。您已将图元绑定到viewmodel项：

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

但您应该改为设置绑定值：

updateDateRange.start = start.format('MM/DD/YYYY');
updateDateRange.end = end.format('MM/DD/YYYY');

---

您需要使用您的模型，而不是摆弄绑定的DOM元素。您已将图元绑定到viewmodel项：

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

但您应该改为设置绑定值：

updateDateRange.start = start.format('MM/DD/YYYY');
updateDateRange.end = end.format('MM/DD/YYYY');

---

我不喜欢混合使用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()">

---

要进一步设置值并更新DOM，只需更新

startDate

和/或

endDate

变量，DOM就会相应地更新。

我不喜欢混合使用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()">

---

要进一步设置值并更新DOM，只需更新

startDate

和/或

endDate

变量，DOM就会相应地更新。

您可能需要强制执行

更改

事件：

$（'input[name=“updateStartDate”].val（start.format（'MM/DD/yyyyy'））.change（）

@RoyJ我试图强制执行，但没有帮助。实际上，当我们触摸输入字段时，模型会更新。您可能需要强制执行

更改

事件：

$（'input[name=“updatestardate”]'）.val（start.format（'MM/DD/yyyyy'））.change（）

@RoyJ我尝试强制执行，但没有帮助。实际上，当我们触摸输入字段时，模型会更新。