Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v model support #49

Merged
merged 1 commit into from
Dec 5, 2016
Merged

v model support #49

merged 1 commit into from
Dec 5, 2016

Conversation

cgarnier
Copy link
Contributor

@cgarnier cgarnier commented Dec 2, 2016

Hello,
You miss the input event to fully support v-model.

Hello,
You miss the input event to fully support v-model.
@coveralls
Copy link

coveralls commented Dec 2, 2016

Coverage Status

Coverage increased (+0.003%) to 99.194% when pulling 0142763 on cgarnier:patch-1 into 05b055d on charliekassel:master.

@charliekassel
Copy link
Owner

Hi, thanks for the PR!
Not sure how this would work as the input element is actually readonly so doesn't support typing.

@cgarnier
Copy link
Contributor Author

cgarnier commented Dec 5, 2016

I didnt touched to the input. I just added an event emit to the parent to make the v model directive update the model. If you dont, you need to update it by your own with the selected event.
I thought it could be cool to use your component as a native input by using this vmodel feature.

You can read more about it there: https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events

And this is how i use your component actualy:

// DateDropdown - just a simple encapsulation
<template>
  <div class="date-dropdown">
    <datepicker v-bind:value="value" @selected="handleUpdate"></datepicker>
  </div>
</template>
<script type="text/babel">
  import Datepicker from 'vuejs-datepicker'
  export default {
    props: ['value'],
    methods: {
      handleUpdate (newVal) {
        this.$emit('input', newVal)
      }
    },
    components: {
      Datepicker
    }
  }
</script>

// Parent
<date-dropdown v-model="myDate"></date-dropdown>

As you can see there is no need to handle any event at end. Model updating is automatically handled by the v model directive.

@charliekassel
Copy link
Owner

Looks good!

@charliekassel charliekassel merged commit 6fa52e1 into charliekassel:master Dec 5, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants