Вопросы Теги

Как сделать так, чтобы визитная карточка с изображением расширялась, чтобы при нажатии отображалось описание изображения?

Обычно эта ошибка возникает, когда мы отправляем заголовок после эха или печати. Если эта ошибка возникает на определенной странице, убедитесь, что страница не выполняет эхо-сигналы перед вызовом start_session().

Пример непредсказуемой ошибки: 

 <?php //a white-space before <?php also send for output and arise error
session_start();
session_regenerate_id();

//your page content

Еще один пример: 

<?php
includes 'functions.php';
?> <!-- This new line will also arise error -->
<?php
session_start();
session_regenerate_id();

//your page content

Вывод: не выводить символ перед тем, как вызывать функции session_start() или header(), даже не с помощью пробела или новой строки

0
задан lokanath 16 January 2019 в 20:39
поделиться

1 ответ

Надеюсь, это то, что вы имели в виду codepen . Я оставлю все остальное в ваших руках.

Html: 

<v-flex
                v-for="card in cards"
                v-bind="{ [`xs${card.flex}`]: true }"
                :key="card.title"
              >
                <v-card>
                  <v-img
                    :src="card.src"
                    height="200px"
                    @click="card.showDetails = !card.showDetails"
                  >

                  </v-img>

                  <v-card-actions v-show="card.showDetails">
                    {{card.description}}
                  </v-card-actions>
                </v-card>
              </v-flex>

js: 

new Vue({
  el: '#app',
  data: () => ({

    cards: [
      { title: 'Pre-fab homes', src: 'https://picsum.photos/800/800', flex: 6, description: "Random Image", showDetails: false },
      { title: 'Pre-fab homes', src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg', flex: 6, description: "House Image", showDetails: false   },
      { title: 'Favorite road trips', src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg', flex: 6,  description: "Road Image", showDetails: false   },
      { title: 'Best airlines', src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg', flex: 6,description: "Plane Image", showDetails: false   }
    ]
  })
})

Полный пример 

new Vue({
  el: '#app',
  data: () => ({

    cards: [{
        title: 'Pre-fab homes',
        src: 'https://picsum.photos/800/800',
        flex: 6,
        description: "Random Image",
        showDetails: false
      },
      {
        title: 'Pre-fab homes',
        src: 'https://cdn.vuetifyjs.com/images/cards/house.jpg',
        flex: 6,
        description: "House Image",
        showDetails: false
      },
      {
        title: 'Favorite road trips',
        src: 'https://cdn.vuetifyjs.com/images/cards/road.jpg',
        flex: 6,
        description: "Road Image",
        showDetails: false
      },
      {
        title: 'Best airlines',
        src: 'https://cdn.vuetifyjs.com/images/cards/plane.jpg',
        flex: 6,
        description: "Plane Image",
        showDetails: false
      }
    ]
  })
})
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/vuetify@1.4.0/dist/vuetify.min.css">
<div id="app">
  <v-app id="inspire">
    <v-layout justify-center>
      <v-flex xs12 sm6>

        <v-card>
          <v-container fluid grid-list-md>
            <v-layout row wrap>
              <v-flex v-for="card in cards" v-bind="{ [`xs${card.flex}`]: true }" :key="card.title">
                <v-card>
                  <v-img :src="card.src" height="200px" @click="card.showDetails = !card.showDetails">

                  </v-img>

                  <v-card-actions v-show="card.showDetails">
                    {{card.description}}
                  </v-card-actions>
                </v-card>
              </v-flex>
            </v-layout>
          </v-container>
        </v-card>
      </v-flex>
    </v-layout>
  </v-app>
</div>

0
ответ дан Boussadjra Brahim 16 January 2019 в 20:39
поделиться
Другие вопросы по тегам:

Похожие вопросы: