Vue.js v-bind not working on a v-data-table

[MexicanR]

I'm trying to bind the id attribute to the v-data-table but when I try to reference the table's id in a method, I find it is empty.

<v-data-table v-bind:headers="headers" :items="patient.bloodsugars" :id="patient.id" v-show="show">

//My method
openDialog (id) {
  var getTables = document.getElementsByTagName('table')
  for (var i = 0; i < getTables.length; i++) {
    if (this.$data.show === false && getTables[i].id === id) {
      this.$data.show = true
    } else {
      this.$data.show = false
    }
  }
}

[brianosaur]

Are you sure you're getting something back from the getElementsByTagName call? If so, maybe try the alternative way to get an id which would be:

getTables[i].getAttribute('id')

[Protocol7]

Vue bindings don't become HTML attributes so using the document.getElementsByTagName('table') to access your table data will not work.

You'll have to figure out how to operate instead on the data model you are binding to.

[editline]21st November 2017[/editline]

I'm not sure exactly what you are trying to accomplish but if you're simply trying to show different data tables for different patients, you can do so easily:

[url]https://codepen.io/protocol7/pen/VrXbPP[/url]

[MexicanR]

[QUOTE=Protocol7;52912145]Vue bindings don't become HTML attributes so using the document.getElementsByTagName('table') to access your table data will not work.

You'll have to figure out how to operate instead on the data model you are binding to.

[editline]21st November 2017[/editline]

I'm not sure exactly what you are trying to accomplish but if you're simply trying to show different data tables for different patients, you can do so easily:

[url]https://codepen.io/protocol7/pen/VrXbPP[/url][/QUOTE]

That's exactly what I'm trying to do but my problem is [URL="https://prnt.sc/hdfxm6"]the way the tables are displayed[/URL], I have them only to be viewable when a button is clicked. I can't find a way to relate the table to the patient. My patients and bloodsugars are pulled in through a vuex store.

[Protocol7]

That's not really the Vue way of doing things, it would be easier to have a single table whose visibility is driven by a boolean of some sort and bind the table to the currently selected patient.

[MexicanR]

[QUOTE=Protocol7;52912682]That's not really the Vue way of doing things, it would be easier to have a single table whose visibility is driven by a boolean of some sort and bind the table to the currently selected patient.[/QUOTE]

So I've re-done my design and I have a problem where the v-cards are [URL="https://prnt.sc/hdh4gy"]rendered under the v-toolbar[/URL]. I've tried using margins and padding but they don't have any effect. Scrolling is set to automatic.

[Protocol7]

[QUOTE=MexicanR;52912764]So I've re-done my design and I have a problem where the v-cards are [URL="https://prnt.sc/hdh4gy"]rendered under the v-toolbar[/URL]. I've tried using margins and padding but they don't have any effect. Scrolling is set to automatic.[/QUOTE]

Can you share your template and CSS? Is the v-toolbar position something that would not affect DOM flow like "absolute"?

[MexicanR]

[QUOTE=Protocol7;52912862]Can you share your template and CSS? Is the v-toolbar position something that would not affect DOM flow like "absolute"?[/QUOTE]
You can find my template below; I'm not using any custom CSS atm, only the default Vue options.

<template>
  <v-app>
    <v-navigation-drawer temporary clipped fixed v-model="drawer" app>
      <v-list dense>
        <v-list-tile v-for="item in menuItems" :key="item.title" :to="item.link">
          <v-list-tile-action>
            <v-icon>{{ item.icon }}</v-icon>
          </v-list-tile-action>
          <v-list-tile-content>{{ item.title}}</v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar class="grey darken-3" dark app fixed clipped-left>
      <v-toolbar-side-icon @click.stop="drawer = !drawer" class="hidden-sm-and-up"></v-toolbar-side-icon>
      <v-toolbar-title>BGDeck</v-toolbar-title>
      <v-spacer></v-spacer>
      <v-toolbar-items class="hidden-xs-only">
        <v-text-field prepend-icon="search" placeholder="Enter Name or ID" clearable absolute></v-text-field>
        <v-btn flat v-for="item in menuItems" :key="item.title" :to="item.link">
          <v-icon dark left>{{ item.icon }}</v-icon>
          {{ item.title }}
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <main>
      <router-view></router-view>
    </main>
  </v-app>
</template>

[Protocol7]

Assuming that "fixed" will apply "position: fixed" to the toolbar, it will indeed float above the content and not affect DOM flow.

I don't know what elements you have added padding and margins to but that's the way to fix it:

[url]https://codepen.io/protocol7/pen/bYMemb[/url]