我目前正在尝试学习基本的Web开发,现在从在线学习平台上的Vue开始。
带有下面的代码:
<div id="app">
<form @submit.prevent="onSubmit">
<input v-model="userName">
<input type="submit" value="Go">
</form>
<div>{{ message }}</div>
</div>
我想使内部div
元素更改为“ Hello”,然后是文本字段(名称)中的内容,然后是“!”。当您按回车
This is my Vue code:
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
您可以在下面的代码段中看到完美的工作方式。您只需在用户名之前添加“ 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>