The Vue references a third-party datepicker plug-in and cannot monitor the value of the datepicker input box. vuedatepicker

The Vue references a third-party datepicker plug-in and cannot monitor the value of the datepicker input box. vuedatepicker

I. background

A third-party datepicker plug-in is used in the Vue project. After the date is selected, the vue cannot detect the change in the datepicker input box.

<Label class = "fl"> date: </label> <div class = "input-wrapper fr"> <input class = "daterangepicker" ref = "datepicker" v-model = "dateRange"/> <a href = "javascript :; "rel =" external nofollow "> </a> </div> export default {data () {return {dateRange:'' }}, watch: {dateRange (newVal, oldVal) {console. log (newVal) // cannot monitor dateRange changes after date selection }}}

Ii. Analysis

Finding Data found that Vue could not monitor data changes caused by third-party plug-ins. Therefore, the above method does not work. However, Vue provides us with a method that converts any data to the data that can be monitored by Vue, namely vm. $ set.

Iii. Solution

Take the datepicker I used as an example (jquery-daterangepicker)

Data () {return {date: '', beginDate:'', endDate: ''}, mounted () {$ ('. daterangepicker '). dateRangePicker ({autoClose: true, format: 'yyyy-MM-DD '}). bind ('dateicker-change', this. setDate) // method provided by the plug-in. Callback triggered after the date is selected}, methods: {setDate () {let datepicker = this. $ refs. datepicker // this step is critical. For more information, see vue api manual this. $ set (this. date, 'begindate', datepicker. value) this. $ set (this. date, 'enddate', datepicker. val Ue) this. beginDate = this. date. beginDate. slice (0, 11) this. endDate = this. date. endDate. slice (-10) }}, watch: {// You can monitor data changes and select a date! BeginDate (newVal, oldVal) {this. $ emit ('inindatechang', newVal)}, endDate (newVal, oldVal) {this. $ emit ('enddatechang', newVal )}}

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.