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.

1 Like

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: