CODEWITHSUNDEEP
javascriptvue.jsdatepicker
Geoff_S
Geoff_S

Reputation: 5105

Vue datepicker and submitting selected date

I'm using the vue-date-picker package in my laravel application, and upon selecting a date from the datepicker I can see in my vue developer tools pickedValue with the selected date. Currently my code is plain:

<datepicker></datepicker>

But I'm wondering, is the pickedValue the correct syntax to use for submitting this in a form? Do I need an onChange event, or can I just use datepicker.pickedValue or something similar? I just want to set the picked date to a variable for an axios post.

UPDATE:

<div v-cloak v-if="isScheduledTask">
  <datepicker v-model="pickedValue" name="pickedValue" id="pickedValue" ></datepicker>
</div>

data() {
  return{
    pickedValue:'',
  }
}

Upvotes: 1

Views: 6237

Answers (1)

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

You should use you local data property and pass it as a :value prop. Getting inner state of component through this.$refs.datepicker.pickedValue is considered a bad practice. It's considered standard de-facto to use props and events to communicate between parent and child components in Vue.js. There are some drawbacks of using your approach:

  1. You can't set the value of the datepicker outside.

  2. Another developer would be confused with such approach.

  3. You are breaking one way data flow approach.

  4. Your code is prone to bug, because that's local component variables. Every time name of this property can change.

Alert from Vue.js docs:

Use $parent and $children sparingly - they mostly serve as an escape-hatch. Prefer using props and events for parent-child communication.

Update

DO NOT EVER DO IT AGAIN

In your case you have no other options, but to access it through refs.

this.$refs.datepicker.pickedValue

<div>
  <datepicker ref="datepicker" value="2018-9-5"></datepicker>
</div>

...
methods: {
  sendForm() {
    console.log(`Picked date ${this.$refs.datepicker.pickedValue}`)
  }
}
...

Update

It's very bad pattern, but you have no choice working with library that does not emit ANY events.

DON'T DO IT EVER AGAIN!!!

<datepicker ref="datepicker" @click.native="method"></datepicker>

data() {
  return {
    value: ''
  }
},
methods: {
  method() {
    this.value = this.$refs.datepicker.pickedValue
  },
},

Upvotes: 1

Related Questions