How to get default value from component vue.js?

Question

I have this component:

<template>
    <div>
        <label class="col-form-label">
            <span>From</span>
        </label>
      <DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="config.state.fromDate" :disabled="config.disabledFrom"></DatepickerFrom>
    </div>
</template>

<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
  data() {
    return {
      config: {
        disabledFrom: {
          to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
          from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
        },
        state: {
          fromDate: new Date(
            dUse.getFullYear(),
            dUse.getMonth(),
            dUse.getDate() - 1
          ).toString()
        }
      }
    }
  },

  methods: {
    SetSelectedDateFrom: function(selectedDate) {
      this.$emit('selected', selectedDate)
    }
  },
  components: {
    DatepickerFrom
  }
}
</script>

note this part:

:value="config.state.fromDate"

I load this component:

  <div class="card selector col-md-4 holder">
    <pickerTo v-on:selected="DateSelector2" ></pickerTo>    
  </div>

import pickerTo from '../components/DateFilterTo'

i have a function that gets the selected value once the a change occurs:

DateSelector2: function(date) {
  FromDate = date
}

Once a new date is picked i assign it to a global variable inside of my parent.

Problem:

I have a default date set in the component which I would like to get when I am making a request to the server. I cant figure out how to get this default value since it does not occur within the change event.

I am new to vue.

Justin MacArthur · Accepted Answer · 2017-11-24 15:34:02Z

3

One of the easiest ways would be to emit the default value when the mounted function fires.

mounted () {
    this.$emit('selected', config.state.fromDate)
}

Other than that I would mutate the value into a prop and alter it slightly to allow it to work with v-model so that the default value is passed from the parent using whichever method it chooses to derive that value.

EDIT:

Here's how I would refactor it to use a prop.

<template>
  <div>
    <label class="col-form-label">
      <span>From</span>
    </label>
    <DatepickerFrom v-on:selected="SetSelectedDateFrom" :value="value" :disabled="config.disabledFrom"></DatepickerFrom>
  </div>
</template>

<script>
import DatepickerFrom from 'vuejs-datepicker'
const dUse = new Date()
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      config: {
        disabledFrom: {
          to: new Date(dUse.getFullYear() - 1, dUse.getMonth(), dUse.getDate()),
          from: new Date(dUse.getFullYear(), dUse.getMonth(), dUse.getDate())
        },
        state: {
        }
      }
    }
  },

  methods: {
    SetSelectedDateFrom: function(selectedDate) {
      this.$emit('input', selectedDate)
    }
  },
  components: {
    DatepickerFrom
  }
}
</script>

now you can use your component with the v-model directive for 2 way binding

<component v-model="dateFrom"></component>

...

data () {
  return {
    dateFrom: new Date(
      dUse.getFullYear(),
      dUse.getMonth(),
      dUse.getDate() - 1
    ).toString()
  }
}

edited Nov 24, 2017 at 15:34

answered Nov 24, 2017 at 15:17

Justin MacArthur

4,05024 silver badges27 bronze badges

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

2 Comments

ThunD3eR Over a year ago

im trying to solve this wiht props but can not figure out how to do it correctly. Would appreciate an example if you can

ThunD3eR Over a year ago

Thank you @Justin MacArthur

Collectives™ on Stack Overflow

How to get default value from component vue.js?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related