vue.js - 如何确定哪个 q-expansion-item 已打开？

Question

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

<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>

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

我尝试分配 id给每个q-expansion-item ，但需要一些笨重的代码来访问 @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

如果您希望 First 打开默认值，则可以在 selected_model 中设置 "First":true。