<template>
    <div class="col-md-3">
        <div class="thumbnail">
            <a :href="src">
                <img :src="src">
            </a>
            <div class="caption">
                <h4>{{ post.make }}</h4>
                <h4>{{ post.model }}</h4>
                <h4>{{ userName }}</h4>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            post:{
                type: Object,
                required: true
            }
        },
        data() {
            return {
                src:'',
                make: '',
                model: '',
                userName: ''
            }
        },
        mounted(){
            if (this.post.make !== null) {
                this.make = this.post.make
            };
            if (this.post.model !== null) {
                this.model = this.post.model
            };
            if (this.post.user !== null) {
                this.userName = this.post.user.name;
            }
        }
    }
</script>

<template>
    <div class="col-md-3">
        <div class="thumbnail">
            <a :href="src">
                <img :src="src">
            </a>
            <div class="caption">
                <h4 v-if="post.make">{{ post.make }}</h4>
                <h4 v-if="post.model">{{ post.model }}</h4>
                <h4 v-if="post.price" style="color:red;">{{ post.price }}</h4>
                <h4 v-if="post.user">{{ post.user.name }}</h4>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props:{
            post:{
                type: Object,
                required: true
            }
        },
        data() {
            return {
                src:''
            }
        },
        mounted(){
            if (this.post.photos == 0 || this.post.photos === null) {
                return this.src = '/images/post-thumbnail.png'
            };
            this.src = '/storage/' + this.post.photos[0].name;
        }
    }
</script>