Vue日期选择器并提交所选日期

Question

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:'',
  }
}

Answer 1

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
  },
},