JSFiddle - React, Tailwind, and code Playground

by Gil Alvaro

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <ol>
    <li v-for="movie in formattedMovies">{{ movie }}<li>
  </ol>
  <!—- EXERCISE 2: Make the button below add a movie of your choice to the
“movies” data property. Then add a watcher which outputs the movie that
was just added in an alert dialog. -->
  <button v-on:click="addMovie">Add Movie</button>
</div>

JavaScript

new Vue({
      el: '#app',
      data: {
        movies: [{
            name: 'The Matrix',
            year: 1999
          },
          {
            name: 'The Matrix Reloaded',
            year: 2003
          },
          {
            name: 'The Matrix Revolutions',
            year: 2003
          }
        ]
      },
      methods: {
        addMovie: function() {
          this.movies.push({
            name: 'The Fast and the Furious',
            year: 2001
          });
        }
      },
      computed: {
        formattedMovies: function() {
          return this.movies.map(function(movie) {
            return movie.name + ' (' + movie.year + ')';
          });
        }
      },
      watch: {
        movies: function(movies) {
          var newMovie = movies[movie.length - 1];
          alert(newMovie.name + ' from ' + newMovie.year + ' was just added!');
        }
      }
    });