vue.js sample2

<div id="app">
  <input type="text" v-model="search_query" placeholder="文字を入力してください">
  <ul>
    <li v-for="album in filterAlbum">
      {{ album }}
    </li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
new Vue({
  el: '#app',
  data: {
    search_query: '',
    album:[
      "Kill 'em All",
      "Ride the Lightning",
      "Master of Puppets",
      "...And Justice for All",
      "Metallica",
      "Load",
      "Reload",
      "St. Anger",
      "Death Magnetic",
      "Hardwired... to Self-Destruct",
     ]
  },
  computed:{
    filterAlbum: function(){
       query = this.search_query;
       return this.album.filter ( function ( album ) {
         return album.indexOf(query) !== -1
       })
    }
  }
});
</script>