3

I'm trying to make a v-data-table that is populated with json data (Vue + Vuetify + Vue-Resource). I can show the data without problems, but I need to change the first colum of the header to let visible what data the user is viewing actually. At this moment I'm using a static header without the label that I want:

headers: [
    {
      text: "",
      align: "left",
      sortable: false,
      value: "name",
      id: "primeiraColunaColuna"
    },

    { text: "total QTD", value: "total QTD" },
    { text: "total", value: "Total" },
    { text: "Date", value: "Date" },
    { text: "Time", value: "Time" }
  ],

I want to make the text field change to A, B, C, D, etc. There's anyway to make this happen?

Mateus Fernando
  • 99
  • 1
  • 4
  • 11

1 Answers1

6

You can return headers from a method, that takes the text as a parameter, for example you could use the current index in a loop:

<v-layout>
  <v-flex v-for="i in 3" xs4>
    <v-data-table
    :headers="getHeaders(i)"
    :items="desserts"
    class="elevation-1"
    >
      <template v-slot:items="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>

      </template>
    </v-data-table>
  </v-flex>
</v-layout>

methods:{
  getHeaders(headingText){
    return [
    {
      text: 'Dynamic heading no. ' +headingText,
      align: 'left',
      sortable: false,
      value: 'name'
    },
    { text: 'Calories', value: 'calories' },
    { text: 'Fat (g)', value: 'fat' }
  ];
}

}

live example: https://codepen.io/sf-steve/pen/pYgOze

Steve
  • 20,703
  • 5
  • 41
  • 67
  • I think this will not solve my problem. Cause there's no input, I should use something like an array: `["A","B","C"]` – Mateus Fernando Mar 01 '19 at 13:16
  • Im sure `v-data-table` will work with a computed property. Please explain your other issue, i dont understand what you mean by `it should be like an array` – Steve Mar 01 '19 at 13:41
  • Here is a working example: https://codepen.io/sf-steve/pen/pYgOze type something in the textbox to see it working – Steve Mar 01 '19 at 13:49
  • I have only one v-data-table that runs 7 times, 1 for each letter (A,B,C,etc). I need the v-data-table are able to get the header like running a v-for (header[i]). – Mateus Fernando Mar 01 '19 at 13:56
  • The data is static, the header is dynamic. No user input. – Mateus Fernando Mar 01 '19 at 13:57
  • It works with whatever you pass as a parameter. You iterate over an array of letters if you want. – Steve Mar 01 '19 at 19:39