javascript - 如何在 v-card for 循环中设置布尔变量？

Question

data: () => ({
    show: false,

    prices: [
      {title: '£500', info: 'eget dolor morbi non arcu risus quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam lacus', show: false},
      {title: '£1000', info: 'eget dolor morbi non arcu risus quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam lacus'},
      {title: '£1500', info: 'eget dolor morbi non arcu risus quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam lacus'},
      {title: '£2000', info: 'eget dolor morbi non arcu risus quis varius quam quisque id diam vel quam elementum pulvinar etiam non quam lacus'}
    ]
  })

<v-navigation-drawer v-model="show" temporary absolute color="grey">
    <v-card v-for="price in prices" v-bind:key="price" height="250" fluid style="margin-bottom: 30px" >
      <v-card-title class="justify-center">{{price.title}}</v-card-title>
      <v-card-text class="justify-center">{{price.info}}</v-card-text>
      <v-card-actions class="justify-center">
      <v-btn outlined class="justify-center" v-on:click="`${price.show}`" >enquire</v-btn>
      
      </v-card-actions>
    </v-card> 
    
  </v-navigation-drawer>

这是我迄今为止尝试过的，它似乎不起作用。我正在尝试获取具有 4 张卡片的导航抽屉功能，一旦您单击其中一张卡片的按钮，另一个导航抽屉将打开/全页覆盖卡，其中包含特定卡片中的数据。

标签： javascriptvue.jsvuetify.js