Prac 3 - solutions

by chengkoon

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>

<div id="app">
  <input type="text" v-model="searchValue" placeholder="Search name here...">
  <ul>
    <li v-for="(classmate, index) in filteredClassmates" :key=index>
        {{ classmate.name }} and {{ classmate.email }}
    </li>
  </ul>

</div>

JavaScript

new Vue({
	el: '#app',
  data: {
  	classmates: [
    	{
      	name: 'John',
        email: '[email protected]'
      },
      {
      	name: 'Joey',
        email: '[email protected]'
      },
      {
      	name: 'Jane',
        email: '[email protected]'
      },
      {
      	name: 'Claudia',
        email: '[email protected]'
      }
    ],
    searchValue: '',
    showOrNot: {}
  },
  methods: {
  	toggleInputBox: function (index) {
			this.showOrNot[index] = !this.showOrNot[index]
      console.log(this.showOrNot[index], this.showOrNot)
    }
  },
  computed: {
  	filteredClassmates: function () {
    	let vm = this;
    	return this.classmates.filter(function(classmate) {
      	return classmate.name.toLowerCase().includes(vm.searchValue.toLowerCase());
      })
    }
  }
})