template.vue

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-lg-10">
                <br>
                <div class="input-group">
                    <input class="form-control form-control-lg" type="text" v-model="search" placeholder="Search" @keyup.enter.stop="result">
                    <span class="input-group-btn">
                    <button type="submit" @click.prevent="result" class="btn btn-primary">Submit</button>
                    </span>
                </div>
            </div>
        </div>
        <br>
        <br>
        <br>
        <div v-show="show" class="row justify-content-center">
            <div v-show="show" class="card card-inverse" style="width: 30rem; background-color: #333; border-color: #333;">
                <img class="card-img-top" :src='movies.Poster' alt="img.png" style="margin: 10px">
                <div class="card-block">
                    <h4 class="card-title">{{movies.Title}}</h4>
                    <p class="card-text">{{movies.Plot}}</p>
                </div>
                <div>
                    <ul class="list-group">
                        <li class="list-group-item list-group-item-info" v-for="rating in movies.Ratings"><span v-if="rating.Source == 'Internet Movie Database'" class="label label-default label-pill"></span> {{rating.Source}}: {{rating.Value}}</li>
                    </ul>
                </div>
                <div class="btn text-left" @click="show=true" style="padding:0; margin: .25rem .25rem 0 .25rem; width: 4rem; cursor: pointer;">
                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
    </div>
</template>