CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Geoff_S
Geoff_S

Reputation: 5107

Getting selected vue value into data return

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

Upvotes: 0

Views: 120

Answers (2)

Boussadjra Brahim
Boussadjra Brahim

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

Upvotes: 1

Andrew Vasylchuk
Andrew Vasylchuk

Reputation: 4779

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: 2

Related Questions