Vue.js and Vuetify slot-scope

Question

I'm really just not sure how slot-scopes work. Wondering if somebody could help me out with this (seemingly) pretty simple problem.

<v-data-table>
    <template slot="items" slot-scope="props">
        <tr @click="props.expanded = !props.expanded">

What I'm looking to do is manually update "props" to expand this row based on an external event. The problem is, I can't figure out how to access this outside of the context noted above. The props.expanded = !props.expanded works just fine.

Any ideas?

Answer 1

There doesn't seem to be a way built in to the component. As the data table creates it's own expanded object and doesn't use a passed in prop.

You can use a ref . Vue page on child component refs .

This following code will set the ref on the data table to accesshere .

<v-data-table ref="accesshere" :headers="headers" :items="dataTable" 
:search="search" item-key="id">

Now you'll be able to access that object by using (setting this to false will close the expanded table row) this.$refs.accesshere.expanded['nameofkey'] = false

Here is a codepen showing it in action.

There is an issue with the expanded object and that it isn't populated until you expand a row for the first time. So if you do something like the following. It won't see those changes (unless you force the component to update) and therefore won't expand the row right away.

 methods: {
   itemShow () {
     this.$refs.accesshere.expanded['2'] = true
     this.$forceUpdate() // This works, I don't know if it is recommended though
  }
 }