F7-cards and sheet modal

Questions
1

Hello everyone,

I have problem with f7 cards and sheet modal. How can I give the card the property to behave like a button so that the sheet opens.

I have already written the following code for this, which unfortunately does not work until now.

<template>
    <f7-pape>
        <f7-navbar>
        <f7-nav-left>
        <f7-link back
            icon-ios="f7:chevron_left" 
            icon-aurora="f7:chevron_left" 
            icon-md="material:navigate_before"></f7-link>
        </f7-nav-left>
        <f7-nav-title>Sheet Modal with Cards</f7-nav-title>
        <f7-nav-right>
        </f7-nav-right>
    </f7-navbar>
    <f7-block>
        <f7-card @click="openSheet()">
        <!--<f7-link sheet-open="#fuelcell">-->
        <div style="background-color: #CCE2E9;">
        <f7-card-content>
          <f7-row>
            <f7-col width="70">
              <f7-row class="block-header">
                <f7-col><b>Brennstoffzelle</b></f7-col>
              </f7-row>
              <f7-row>
                <f7-col width="40">Strom</f7-col>
                <f7-col width="60">0 kWh</f7-col>
              </f7-row>
              <f7-row>
                <f7-col width="40">Wärme</f7-col>
                <f7-col width="60">0 kWh</f7-col>
              </f7-row>
            </f7-col>
            <f7-col width="30">
              <img src="../assets/static/brennstoffzelle.svg" style="max-height:20vh"  class="float-right">
            </f7-col>
          </f7-row>
        </f7-card-content>
        </div>
      </f7-card>
    </f7-block>
    <Fuelcell />
    </f7-pape>
</template>
<script>

// Sheets
import Fuelcell from '@/components/heatsheets/fuelcell.vue';
import $$ from 'dom7';

export default {
  Data() {
    return {
    sheetOpened: false,
    }
  },
  components:
  {
    Fuelcell,
  },
    props: {
    f7route: Object,
    f7router: Object,
  },
  setup(props) {
    const { f7route, f7router } = props;
  },
  methods:{
      openSheet()
      {
        $$('#fuelcell').show;
      }
  },
}
</script>

Here is the component:

<template>
<f7-sheet id="fuelcell" backdrop close-by-backdrop-click>
  <f7-toolbar>
    <f7-link></f7-link>
    <f7-link sheet-close>Schließen</f7-link>
  </f7-toolbar>
  <f7-block>
    <h2>Brennstoffzelle</h2>
    <p>Hier kommt der Info Text zur Brennstoffzelle rein!</p>
  </f7-block>
</f7-sheet>
</template>

Thank you very much for the quick help.