How to get vue md-datepicker value which is in under md-table-->md-table-cell(basically in loop) in scripting function

I have used the vue-material (table and datepicker)and want to get md-datepicker value in my script and md-datepicker is not a single entity. It is in loop and basically it should provide me array of selected date by user in my script. Currently it is coming undefined.

Here is my code-

<template>
  <div>
    <md-table v-model="people" md-card @md-selected="onSelect">
      <md-table-toolbar>
        <h1 class="md-title">With auto select and alternate headers</h1>
      </md-table-toolbar>

      <md-table-toolbar slot="md-table-alternate-header" slot-scope="{ count }">
        <div class="md-toolbar-section-start">{{ getAlternateLabel(count) }}</div>

        <div class="md-toolbar-section-end">
          <md-button class="md-icon-button">
            <md-icon>delete</md-icon>
          </md-button>
        </div>
      </md-table-toolbar>

      <md-table-row slot="md-table-row" slot-scope="{ item, index }" md-selectable="multiple" md-auto-select>
        <md-table-cell md-label="Name" md-sort-by="name">{{ item.name }}</md-table-cell>
        <md-table-cell md-label="Email" md-sort-by="email">{{ item.email }}</md-table-cell>
        <md-table-cell md-label="Gender" md-sort-by="gender">{{ item.gender }}</md-table-cell>
        <md-table-cell md-label="Job Title" md-sort-by="title">{{ item.title }}</md-table-cell>
        <md-table-cell md-label="Deployment Date" md-sort-by="date"><md-datepicker md-model-type="Date" md-immediately="true" v-bind:value="dateValue" v-on:input="$emit('input', $event)"/></md-table-cell>
      </md-table-row>
    </md-table>

    <p>Selected:</p>
    {{ selected }}
  </div>
</template>
<script>
    export default {
        name: 'TableMultiple',
        props: {
            dateValue: [],
        },
        data: () => ({
            selected: [],
            people: [
                {
                    name: 'Shawna Dubbin',
                    email: 'sdubbin0@geocities.com',
                    gender: 'Male',
                    title: 'Assistant Media Planner',
                },
                {
                    name: 'Odette Demageard',
                    email: 'odemageard1@spotify.com',
                    gender: 'Female',
                    title: 'Account Coordinator'
                },
                {
                    name: 'Lonnie Izkovitz',
                    email: 'lizkovitz3@youtu.be',
                    gender: 'Female',
                    title: 'Operator'
                },
                {
                    name: 'Thatcher Stave',
                    email: 'tstave4@reference.com',
                    gender: 'Male',
                    title: 'Software Test Engineer III'
                },
                {
                    name: 'Clarinda Marieton',
                    email: 'cmarietonh@theatlantic.com',
                    gender: 'Female',
                    title: 'Paralegal'
                }
            ]
        }),
        methods: {
            onSelect (items) {
                this.selected = items
                console.log(this.dateValue);
            },
            getAlternateLabel (count) {
                let plural = ''

                if (count > 1) {
                    plural = 's'
                }

                return `${count} user${plural} selected`
            }
        }
    }
</script>
<style lang="scss" scoped>
  .md-table + .md-table {
    margin-top: 16px
  }
</style>

I have invested the whole day and could not get the solution.
Your help would be much appreciated…
Thanks in advance

You are binding v-bind:value="dateValue" array to every single datapicker and then just emiting input event on your component with v-on:input="$emit('input', $event)" but there is no code shared where you are handling this. I think it is done in another component as you are using props in here.

Instead of biding value to:
v-bind:value="dateValue"
Try to use:
v-bind:value="dateValue[index]"
as you have index from slot-scope.

Then in your component where props is from, just bind event input with:
@input="setDate"
OnEmit function should as well get this index so you can bind value to proper index of array:
v-on:input="$emit('input', {event: $event, index})"

And create new method:

setDate({event, index}) {
  this.dateValue[index] = event.target.value;
}

And I feel its better to change name of method to something like:
@dateChanged

// PS:
If you have this data in one component you can just use v-model as is said in here :

Hi @lrembacz,

Thanks for the response…
I am using it in single component and if i use the
v-model= "dateValue[index]"
with data function defined dateValue as array i get the empty array and when i use the dateValue as props array i get the this error on page load itself-

TypeError: Cannot read property '0' of undefined

Am i missing something here ?

That is the reason i was using v-bind:value and trying to get date of different fields but you mentioned it is for component to component data binding if i understood right your statement.

Something like that should work.

It’s better to have your dates in people object i think.

In my solution I map people to dates or to null if there is nothing in computed property.

Array is some kind of helper array with dates for indexes.

But answer is inside dateForPeople.

this.$set is used to notify Vue that changes were done so computed property dateForPeople can see them.

2 Likes

Hi @lrembacz,

Thanks for the solution and your time. I have integrated your solution and working as expected.
Kudos :slightly_smiling_face::slightly_smiling_face:

Hi @lrembacz ,

sorry to bother again , i stuck in another issue - there are md-datepicker in loop and in my case user has to select one row with the help of md-checkbox. Whenever user selected the one row in that case i need to disable or hide remaining md-datepicker except the one which user selected.

Any idea ? how can i do that ?

@PunitNamdeo Try something like that.

You just need to assign index or some kind of key of row as selected value in you data/store.

Then with v-if just conditionally show md-datepicker i guess.

Hi @lrembacz,

The logic is perfectly right but in my case i am using md-table with md-selected attribute which gives checkbox to select the row and md-selected attribute comes the before md-table-row where index will be always undefined.

As per the solution provided by you i tried it with my structure but it does not work as expected.
The code which i have given in starting where i have started discussion the same code i am using for this implementation.

If you can provide the solution as the structure which i am using then it would be great.

Highly appreciated for you time and solution …

@PunitNamdeo something like that should work. Just replace placeholder with md-datepicker

@lrembacz , I tried it from my end as you suggested but in this case sometime Date header does not come which does not look good.

Do you know something where Date picker is available for all rows and when user select one row in that case it should disable the date picker of remaining rows ?

@PunitNamdeo

1 Like

Thank you so much for your time and solution :slight_smile: