Getting selected vue value into data return

Question

I'm currently using a vue datepicker which, when a date is selected, shows pickedValue as the value for the selected date in vue developer tools:

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

Trying to set the pickedValue to a variable in my data return (i need the picked value to be submitted with other data here) as a $ref is breaking the page. If I change this to just datepicker.pickedValue then it's undefined. What am I doing wrong here?

data() {
    return {
       pickedValue: this.$refs.datepicker.pickedValue
    }
 }

Andrew Vasylchuk · Accepted Answer · 2019-08-23 19:31:23Z

2

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

answered Aug 23, 2019 at 19:31

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Vasylchuk · Accepted Answer · 2019-08-23 19:32:08Z

1

Try to use v-model directive to bind your datepicker to that data property pickedValue as follows :

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

script :

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

edited Aug 23, 2019 at 19:32

Andrew Vasylchuk

4,7792 gold badges14 silver badges31 bronze badges

answered Aug 23, 2019 at 19:22

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Collectives™ on Stack Overflow

Getting selected vue value into data return

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related