Vue Material Grid: How do I select the first occurring row by default when the page is loaded?

Question

As I mentioned in the Q-title, I have built a datatable from Vue Material Table md-table using data that is fetched from backend and sorted by specific column.

Now in frontend I want the top(first) row (of the sorted rows) to be selected automatically when the page is loaded. The Vue-Datatable code is as below:

<div :loading="loading" class="locations-table" v-if="locations">
    <md-table v-model="locations" md-card @md-selected="onChoose">
        <md-table-row slot="md-table-row" slot-scope="{ item, index }" md-selectable="single" md-auto-select>
            <md-table-cell md-label="City" md-sort-by="city">{{ item.city }}</md-table-cell>
            <md-table-cell md-label="State" md-sort-by="state">{{ item.state }}</md-table-cell>
            <md-table-cell md-label="Zip" md-sort-by="zip">{{ item.zip }}</md-table-cell>
            <md-table-cell md-label="Population" md-sort-by="population">{{ item.population }}</md-table-cell>
        </md-table-row>
    </md-table>
</div>

How can I select the first row of this table automatically when the page is loaded ?

I am open for hook changes like created or mounted, but would prefer to use some attribute like md-selected-value.sync or md-selected-value or something so that I can assign the index value with some condition like md-selected-value="index === 0". Is something like I just mentioned, possible ?

I referred this documentation, but it didn't help, the prop/attribute they specified md-selected-value.sync for setting selected value(row in this case) doesn't work.

score 0 · Accepted Answer · answered May 23 '22 at 19:46

You can try to pass first index from locations array :md-selected-value="locations[0]"

Vue.use(VueMaterial.default)

new Vue({
  el: '#app',
  data() {
    return {
      loading: false,
      locations: [{city: 'aaa', state: 'aa', zip: '22', population: 55}, {city: 'bbb', state: 'bb', zip: '33', population: 66}, {city: 'ccc', state: 'cc', zip: '44', population: 77}],
      selected: {}
    }
  },
  methods: {
    onChoose(item) {
      this.selected = item
    }
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Material+Icons">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default.css">
<div id="app">
  <div :loading="loading" class="locations-table" v-if="locations">
    <md-table v-model="locations" md-card @md-selected="onChoose" :md-selected-value="locations[0]">
      <md-table-row slot="md-table-row" slot-scope="{ item, index }" md-selectable="single" md-auto-select>
        <md-table-cell md-label="City" md-sort-by="city">{{ item.city }}</md-table-cell>
        <md-table-cell md-label="State" md-sort-by="state">{{ item.state }}</md-table-cell>
        <md-table-cell md-label="Zip" md-sort-by="zip">{{ item.zip }}</md-table-cell>
        <md-table-cell md-label="Population" md-sort-by="population">{{ item.population }}</md-table-cell>
      </md-table-row>
    </md-table>
    {{selected}}
  </div>
</div>
<script src="https://unpkg.com/vue-material"></script>

@Vicky Dev you are welcome mate, cheers :) – Nikola Pavicevic May 23 '22 at 20:48 — Nikola Pavicevic, May 23 '22 at 20:48

Vue Material Grid: How do I select the first occurring row by default when the page is loaded?

1 Answers1