[Vuejs]-Manipulating a div using vue js methods

by

0👍

add data section with username and message:

data: {
  return {
    username: null,
    message: null
  }
}

0👍

Your application should look like this:

// initial data goes in data
new Vue({
  el: '#app',
  data:{
    message: null,
    userName: null
  },
  methods: {
    // change onClick to onSubmit (the function name..)
    // a method here is the function passed from an event
    onSubmit: function (e) {
      this.message = this.userName + '!'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0/vue.js"></script>

<div id="app">
  <form @submit.prevent="onSubmit">
    <input v-model="userName">
    <input type="submit" value="Spela">
  </form>
  <div>{{ message }}</div>
</div>

Leave a comment