list images vuejs

example vue js

by femfoyou

HTML

<div id="app">
   
   <h1>{{selectedMovie.Title}}</h1>
   <movie :selected-movie="selectedMovie"></movie>

</div>


<script type="text/x-template" id="single-movie">

<transition appear name="slide-fade">
	<section>
 
 <img v-if="selectedMovie.Poster != 'N/A'" :src="selectedMovie.Poster" alt="selectedMovie.Title + ' poster'">
<div>
  <h2>{{selectedMovie.Title}}</h2>
  <p class="plot">{{selectedMovie.Plot}}</p>
</div>
  
  </section>
</transition>
</script>

JavaScript

Vue.component('movie', {
	template: '#single-movie',
  props: ['selectedMovie']
});

var app = new Vue({
  el: '#app',
  data: {
		title: 'esto es el titulo',
    selectedMovie: {}
  },
  mounted:function(movie){
  	this.searchMovie('indiana');
  },
  methods:{
  	searchMovie: function(movie){
  	fetch('http://www.omdbapi.com/?t=' + movie)
    	.then(function(respon){
      	return respon.json();
      })
      .then(json => {
      	console.log(json);
        this.selectedMovie = json;
      })
    }
  }
});