Klein Maximus

<template src="./modal.html" lang="html"></template>

const routes = [
  {
    path: '/events/map/:id',
    component: EventMapPage
  },
  {
    path: '/events',
    component: EventPage,
  },
];

import BImgLaze from 'bootstrap-vue/src/components/image/img-lazy'
export default {
  name: "b-img-lazy-ex",
  mixins: [BImgLaze],
}

<a v-else :href="'https://vk.com/wall'+wall.owner_id +'_'+ wall.id">

<template>
  <div class="walls">
    <div class="loading" v-if="loading">Loading...</div>
    <div v-if="error" class="error">{{ error }}</div>
    <div class="album py-5 bg-light" v-if="walls">
      <div class="container">
        <div class="row">
          <div class="col-md-4" v-for="({ href, id, img, text }, index) in list" :key="index">
            <div class="card mb-4 shadow-sm">			 
              <img v-if="img" class="card-img-top" style="height: 225px; width: 100%; display: block;" :src="img">                
              <div class="card-body">
                <a :href="href">
                  <p class="card-text">{{ text }}</p>				  				   				   
                </a>
                <div class="d-flex justify-content-between align-items-center">      
                  <small class="text-muted">{{ id }}</small> 
                </div>
              </div>
            </div>
          </div>
        </div>		  
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

const getUrl = (a, b, URL = 'https://vk.com/wall') => `${URL}${a}_${b}`;

export default {
  data: () => ({
    loading: false,
    walls: null,
    error: null,
  }),

  computed: {
    list() {
      const { walls } = this;
      if (!walls) return [];

      return walls.map((wall) => {
        const { copy_history } = wall;
        const { attachments, id, owner_id, text } = copy_history && copy_history[0] ? copy_history[0] : wall;
        const href = getUrl(owner_id, id);
        const { photo } = (attachments || []).find(({ type }) => type === 'photo');
        const img = photo ? photo.photo_1280 : false;
        return { href, img, text, id: wall.id };
      };
    },
  },

  created() {
    this.fetchData();
  },

  methods: {
    async fetchData() {
      this.error = this.walls = null;
      this.loading = true;
      try {
        const { data } = await axios.get('/api/walls');
        this.walls = data.items;
      } catch (error) {
        this.error = error.response.data.message || error.message;
      } finally {
        this.loading = false;
      }
    }
  }
}
</script>

$store.state.data && $store.state.data.city ? $store.state.data.city.name : null

let cityName;
try {
  cityName = this.$store.state.data.city.name;
} catch (e) {
  cityName = null;
}

render: function (h) {
  if (this.List.length <= 5) return h('');
  return h('div', { ... });
}

// parent.vue
<template>
  <slot name="foo"/>
  <slot name="bar"/>
  <slot name="qux"/>
</template>