vue.js 与 .datepicker 冲突并在更改下一个 v-model 输入后删除日期值

Question

我有一个用 laravel 和 vue2 实现的表单，它有一些我正在使用 datepicker 插件的日期字段。但问题是，当我输入下一个（或任何其他）输入时，日期字段的值变为空。我尝试了很多方法并寻找了很多问题，但没有任何帮助。

See this Short Video for better understanding of the problem

输入

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="memo_date">Memo Date</label>
    <input v-model="form.memo_date" class="form-control demoDate2" id="memo_date" name="memo_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off" value="{{old('memo_date')}}">
    <span class="text-danger" v-if="errors.memo_date">@{{ errors.memo_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="from_date">From Date</label>
    <input class="form-control demoDate2" v-model="form.from_date" @keyup.prevent="getDuration" id="from_date" name="from_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.from_date">@{{ errors.from_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="to_date">To Date</label>
    <input class="form-control demoDate2" v-model="form.to_date" @keyup.prevent="getDuration" id="to_date" name="to_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.to_date">@{{ errors.to_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label" for="memo_no">Memo No</label>
    <input class="form-control" v-model="form.memo_no" id="memo_no" type="text" name="memo_no" value="{{ old('memo_no') }}">
    <span class="text-danger" v-if="errors.memo_no">@{{ errors.memo_no[0] }}</span>
</div>

数据和挂载函数

data: {
   ...
   ...
    form: {
        attachment:'',
        memo_no:'',
        memo_date:'',
        from_date:'',
        to_date:'',
        duration:'',
        description:'',
        employees_ids:[],
    },
    errors:[]
},

mounted: function (){
    // datepicker
    $('.demoDate2').datepicker({
        format: "dd-mm-yyyy",
        autoclose: true,
        todayHighlight: true,
        orientation: "bottom auto"
    });
}

附加说明：我在mounted() 中使用了change() 事件，以在使用日期选择器/键盘添加日期值并触发它时发出警报。 但是当值被移除时，事件不会触发！

我已经尝试过This 以及更多，但没有任何帮助。请帮我找出问题。任何帮助表示赞赏。

Answer 1

我认为你必须绑定 datepicker onSelect 事件来更新当前模型。

你可以看下面的例子。

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="memo_date">Memo Date</label>
    <input v-model="form.memo_date" class="form-control demoDate2" id="memo_date" name="memo_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off" value="{{old('memo_date')}}">
    <span class="text-danger" v-if="errors.memo_date">@{{ errors.memo_date[0] }}</span>
</div>

================================================ ====================================

 data: {
       ...
       ...
        form: {
            attachment:'',
            memo_no:'',
            memo_date:'',
            from_date:'',
            to_date:'',
            duration:'',
            description:'',
            employees_ids:[],
        },
        errors:[]
    },
    
    mounted: function (){
        var self = this;
        // datepicker
        $('.demoDate2').datepicker({
            format: "dd-mm-yyyy",
            autoclose: true,
            todayHighlight: true,
            orientation: "bottom auto",
            onSelect:function(selectedDate, datePicker) {            
                  self.form.memo_date = selectedDate;
            }
        });
    }

Answer 2

问题可能是几件事：

1. 您正在使用 value 和 v-model。使用 v-model 时不要使用 value，当您收到错误响应时设置默认值（如果您使用 ajax 发布）或者如果您使用默认 post 则使用 prop 设置它
2. jQuery是一个DOM操作库，而vue使用shadow dom。它们不能很好地协同工作，尤其是在 jQuery 设置输入值时。

如果您使用默认表单发布输入，请创建包含值的隐藏输入并在日期选择器更改时设置值。 如果您使用 ajax 发布此表单，则不需要隐藏输入，因为您在 vue 数据对象中拥有所需的所有数据。

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="memo_date">Memo Date</label>
    <input type="hidden" v-model="form.memo_date" name="memo_date">
    <input class="form-control demoDate2" id="memo_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off" value="@{{ form.memo_date }}">
    <span class="text-danger" v-if="errors.memo_date">@{{ errors.memo_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="from_date">From Date</label>
    <input type="hidden" v-model="form.from_date" name="from_date">
    <input class="form-control demoDate2" @keyup.prevent="getDuration" id="from_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.from_date">@{{ errors.from_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label col-form-label-sm" for="to_date">To Date</label>
    <input type="hidden" v-model="form.to_date">
    <input class="form-control demoDate2" @keyup.prevent="getDuration" id="to_date" name="to_date" type="text" placeholder="DD-MM-YYYY" autocomplete="off">
    <span class="text-danger" v-if="errors.to_date">@{{ errors.to_date[0] }}</span>
</div>

<div class="form-group">
    <label class="col-form-label" for="memo_no">Memo No</label>
    <input class="form-control" v-model="form.memo_no" id="memo_no" type="text" name="memo_no">
    <span class="text-danger" v-if="errors.memo_no">@{{ errors.memo_no[0] }}</span>
</div>

    data: {
       ...
       ...
        form: {
            attachment:'',
            memo_no:'',
            memo_date:'',
            from_date:'',
            to_date:'',
            duration:'',
            description:'',
            employees_ids:[],
        },
        errors:[]
    },
    
    mounted: function (){
        $('.demoDate2').datepicker({
            format: "dd-mm-yyyy",
            autoclose: true,
            todayHighlight: true,
            orientation: "bottom auto",
            onSelect: (selectedDate, datePicker) => {
                // No need to bind this when using arrow functions.
                // You may need to find out which datepicker is changing via the event.target or datePicker to do a switch or if else to set the correct date.
                this.form.memo_date = selectedDate;
            }
        });
    }