Управление элементами в Vue

Question

В настоящее время я пытаюсь изучить основы c веб-разработки, теперь начиная с Vue на платформе онлайн-обучения.

С помощью этого кода ниже:

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

Я хочу сделать так, чтобы внутренний div -элемент изменился на "Hello", за которым следует текст в текстовом поле (имя), за которым следует "!" когда вы нажимаете ввод

Это мой Vue код:

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

Код не работает, и мне два выдают ошибки:

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

Answer 1

Как видно из фрагмента ниже, ваш код работает отлично. Вам нужно добавить "Hello" перед именем пользователя, и вы получите желаемый результат. Бот жалуется на значение, возвращаемое методом onSubmit, поскольку оно не содержит «Hello» в нем.

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>