CODEWITHSUNDEEP
javascripthtmlvue.js
user13576861
user13576861

Reputation:

Manipulating elements in Vue

I am currently trying to learn basic web development, now starting with Vue on an online learning platform.

With this code below:

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

I want to make so that the internal div-element changes to "Hello" followed by what's in the text field(a name), followed by an "!" when you press enter

This is my Vue code:

new Vue({
  el: '#app',
  data:{
    message: null,
    userName: null
  },
  methods: {
    onSubmit: function() {
      this.message = this.userName + '!'
    }
  }
})

The code doesn't work, and me two gives error outputs:

does not have an onSubmit method which renders the correct message for the value “John Smith” ***(just an example of a name)
does not has an onSubmit method which renders the correct message for some value

Upvotes: 0

Views: 41

Answers (1)

Igor Moraru
Igor Moraru

Reputation: 7729

As you can see in the snippet below your code works perfectly. You joust need to add "Hello" before username and you get the result you want. The bot is complaining about the value returned by the onSubmit method, since it does not contain "Hello" in it. 

const app = new Vue({
  el: '#app',
  data:{
    message: null,
    userName: null
  },
  methods: {
    onSubmit: function() {
      this.message = "Hello " + this.userName + '!'
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
      <form @submit.prevent="onSubmit">
        <input v-model="userName">
        <input type="submit" value="Go">
      </form>
      <div>{{ message }}</div>
</div>

Upvotes: 1

Related Questions