时间戳

首页 > 解决方案 > 如何确定打开了哪个 q-expansion-item？

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

问题描述

我有q-list几个q-expansion-item小时候的孩子。s 被分配给一个列表，因此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>

我想在打开任何一个时运行一个 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组中的哪个在任何给定时间是开放的？

标签： vue.jsquasar-framework

解决方案

您可以在不使用 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":true在selected_model.

推荐阅读