https://giga-link.ru/static/js/pages/pubs-detail.js

1const headerPubs = Vue.component('header-pubs', {
2    data(){
3        return{
4            DETAIL_PUBS_URL: DETAIL_PUBS_URL,
5            ID: ID,
6            pubsInfo: []
7        }
8    },
9    computed:{
10        getUrl(){
11            return this.DETAIL_PUBS_URL + this.ID + "/"
12        }
13    },
14    methods:{
15        getDetailPubs(){
16            axios
17            .get(
18                this.getUrl,
19            )
20            .then(response=>{
21                this.pubsInfo = response.data
22            })
23        }
24    },
25    mounted(){
26        this.getDetailPubs()
27    },
28    template:`
29        <div class="header_pubs" v-if="pubsInfo">
30            <div class="header_pubs__header">
31                <div class="header_pubs__header__ptype">
32                    {{ pubsInfo.ptype }}
33                </div>
34                <div class="header_pubs__header__date">
35                    {{ pubsInfo.date }}
36                </div>
37            </div>
38            <div class="header_pubs__title">
39                {{ pubsInfo.title }}
40            </div>
41            <div class="header_pubs__annotation" v-html="pubsInfo.annotation"></div>
42            <div class="header_pubs__main-block">
43                <div class="hidden-block" v-show="!pubsInfo.prev_next_pubs.prev"></div>
44                <a 
45                    :href="pubsInfo.prev_next_pubs.prev.url" 
46                    class="header_pubs__main-block__prev-pubs" 
47                    v-if="pubsInfo.prev_next_pubs.prev"
48                >
49                    <div class="header_pubs__main-block__prev-pubs__prev-arrow"></div>
50                    <div class="header_pubs__main-block__prev-pubs__title">
51                        {{ pubsInfo.prev_next_pubs.prev.title }}
52                    </div>
53                </a>
54                <div class="header_pubs__main-block__img-block">
55                    <img :src="pubsInfo.img" :alt="pubsInfo.title">
56                </div>
57                <a 
58                    :href="pubsInfo.prev_next_pubs.next.url" 
59                    class="header_pubs__main-block__next-pubs" 
60                    v-if="pubsInfo.prev_next_pubs.next"
61                >
62                    <div class="header_pubs__main-block__next-pubs__next-arrow"></div>
63                    <div class="header_pubs__main-block__next-pubs__title">
64                        {{ pubsInfo.prev_next_pubs.next.title }}
65                    </div>
66                </a>
67                <div class="hidden-block" v-show="!pubsInfo.prev_next_pubs.next"></div>
68            </div>
69        </div>
70    `
71})
72
73new Vue({
74    el: "#header-pubs",
75    template:`
76        <header-pubs>
77        </header-pubs>
78    `
79})