javascript - Vue.js and Vuetify slot-scope - Stack Overflow

admin管理员组

文章数量:1405375

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?

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?

• javascript
• vue.js
• vuetify.js

Share Improve this question Follow edited Sep 21, 2018 at 8:32 Billal BEGUERADJ 22.8k4545 gold badges123123 silver badges140140 bronze badges asked Dec 7, 2017 at 0:47 drew kroftdrew kroft 91611 gold badge1414 silver badges2828 bronze badges 1

• You can also refer to this link: vuejs/v2/guide/ponents-slots.html – Billal BEGUERADJ Commented Sep 21, 2018 at 8:32

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

There doesn't seem to be a way built in to the ponent. 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 ponent 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 ponent 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 remended though
  }
 }

本文标签： javascriptVuejs and Vuetify slotscopeStack Overflow