如何判断哪个q-expansion-item是打开的？

Question

我有一个 q-list 和几个 q-expansion-item 作为 children。 q-expansion-item 被分配到一个列表，因此在任何给定时间只有一个打开。

<q-list padding>
    <q-expansion-item 
        id="explore" 
        group="somegroup" 
        icon="explore" 
        label="Explore" 
        default-opened
        @show="switchMode">
            <q-card id="explore-card">
                <q-card-section id="explore-card-section">
                    Item one text
                </q-card-section>
            </q-card>
    </q-expansion-item>
    <q-expansion-item 
        id="identity"
        group="somegroup"
        icon="perm_identity"
        label="Identity"
        @show="switchMode">
            <q-card>
                <q-card-section>
                    Item two text.
                </q-card-section>
           </q-card>
    </q-expansion-item>
</q-list>

我想运行打开任何 q-expansion-item 时的 Vue 方法，并确定打开了哪个特定项目。

我试过为每个 q-expansion-item 分配一个 id，但需要一些笨拙的代码来访问 @show 事件中的 ID：`

new Vue({
  el: '#q-app',
  data: function () {
    return {}
  },
  methods: {
    switchMode: function (event) {
      console.log(event.target.parentElement.parentElement.parentElement.parentElement.id)
    }
  },
  // ...etc
})

我也尝试过使用 to 属性来更改 URL 片段，但是当项目展开时 URL 不会更新（它只会在单击项目标题时更新 URL 片段。

如何确定群组中的哪个 q-expansion-item 在任何给定时间处于打开状态？

Answer 1

您可以在不使用 ID 和事件的情况下实现此目的。您可以改用 v-model。

例子-

<q-expansion-item
    group="somegroup"
    icon="explore" v-model="selected_model['First']"
    label="First"
    header-class="text-primary"
>
    <q-card>
        <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        </q-card-section>
    </q-card>
</q-expansion-item>

<q-separator />

<q-expansion-item 
    group="somegroup"
    v-model="selected_model['Second']" 
    icon="perm_identity" 
    label="Second" 
    header-class="text-teal"
>
    <q-card>
        <q-card-section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
        </q-card-section>
    </q-card>
</q-expansion-item>

数据-

data(){
    return{
        selected_model:{}
    }
}

结果- { "First": true, "Second": false, "Third": false, "Fourth": false }

Codepen - https://codepen.io/Pratik__007/pen/poymOqm

如果你想先打开默认那么你可以在selected_model中设置"First":true。

如何判断哪个q-expansion-item是打开的？

How to determine which q-expansion-item is open?

vue.js

quasar-framework