MyFirst VUE

MyFirst VUE

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<div id="app" class="container">
  <h2>{{ title }}</h2>
  <input v-model="message">
  <ul id="items">
   <li v-for="item in items"  v-on:click="reverseMessage(item)">{{item}}</li>
  </ul>
</div>

JavaScript

var data = {
  items: ['Bananas mama', 'Apples papa'],
  title: 'My Shopping List',
  message: 'result will be here -->'
};
new Vue({
  el: '#app',
  data: data,
   methods: {
    reverseMessage: function (param) {
     this.message =  param.split('').reverse().join('')
     alert(this.message);
    }
  }
});