Vue.js 如何确定哪个q扩展项是打开的？

我有一个

q-list

，有几个

q-expansion-item

s作为孩子。

q-expansion-item

s被分配给一个列表，因此在任何给定时间只有一个打开的列表

项目1案文
项目2案文。

我希望在打开任何

q-expansion-item

时运行Vue方法，并确定打开了哪个特定项

我已尝试为每个

q-expansion-item

分配

id

，但需要一些笨拙的代码来访问

@show

事件中的id：`

newvue({
el:“#q-app”，
数据：函数（）{
返回{}
},
方法：{
开关模式：功能（事件）{
日志（event.target.parentElement.parentElement.parentElement.parentElement.parentElement.id）
}
},
//…等等
})

我还尝试使用

to

属性来更改URL片段，但在项目展开时，这不会更新URL（它仅在单击项目标题时更新URL片段）

---

如何确定组中的哪个

q-expansion-item

在任何给定时间处于打开状态？

无需使用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-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>

结果-

{“第一”：真，“第二”：假，“第三”：假，“第四”：假}

代码笔-

---

如果您想首先打开默认设置，那么您可以在

选定的\u模型中设置
“First”：true
您可以实现这一点，而无需使用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-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>

结果-
{“第一”：真，“第二”：假，“第三”：假，“第四”：假}

代码笔-

如果您想首先打开默认设置，那么您可以在
选定的\u model
中设置
“First”：true