Tuesday 30 March 2021

Vue.js - How to get the value of Date from $refs

How to get the value of Date from $refs  - however this may also help you find the solution to other similar issues.  I'm blogging this as I couldn't find a written solution on the the net.  And got to the solution by looking hard enough. 

So the HTML is as follows.  This is using 'v-date-picker' ( vuetify ) 


<v-date-picker
:v-model="survey_date"
light
ref="Date"
label="Date"
id='survey_date'
prepend-icon="date_range"
filled
></v-date-picker>


And I need to know how to pick up the date in the $ref

In the ‘SCRIPT’ lets ‘console.log’ the ref

const new_date = this.$refs.Date;
console.log(new_date);


This outputs an object - in here eventually I opened ‘emitInput’ - I’d seen in another post that values were kept in ‘input’ , so it seemed to make sense.


Drilling down further I saw ‘inputDate’



Using this I can access that date ‘2021-03-09’ which is what I want.

const new_date = this.$refs.Date.inputDate;

No comments: