javascript - Vue js 组件中的方法
问题描述
下面的代码给了我一些下一个错误。我要做的就是输入数据,然后按钮应该发出警报并输出输入的数据。
<template>
<div class="hello">
<h1> {{ greeting }} </h1>
<label for="value"> Name </label>
<input type="text" v-model="value" placeholder="input name">
<button type="submit" v-on:click="clickHandler" class="btn btn-primary">Submit</button>
</div>
</template>
<script src="./main.js"></script>
<script>
export default {
name: 'input-data',
data: function() {
return {
value: String,
greeting: "Welcome to Heaven Stranger"
}
},
methods: {
clickHandler: function() {
alert("Name of SIR: " + value);
}
}
}
解决方案
methods: {
clickHandler: function() {
alert("Name of SIR: " + this.value);
}
}
在这里你的代码沙箱和播放
推荐阅读
- user-interface - 如何对齐脚手架上的背景图像?
- apache-spark - Pyspark - date_add 基于固定日期并从其他列获取增量
- flask - 标头中没有访问令牌,即使在指定之后:Flask 和 JWT
- pandas - Pandas:带有相邻条形的堆积条形图
- c++ - 未定义对 `vtable [CMakeLists.txt] 的引用(单元测试)
- java - Android 项目 NullPointerException 试图在位图图像上调用 Files.readAllBytes(Paths.get("Image Path")))
- c# - 需要检查 jwt 令牌在 asp.net 核心中是否有效/过期
- java - Scanner.findWithinHorizon() 在多行匹配时失败
- php - 禁用具有相同用户 ID PHP 的多个登录
- google-calendar-api - 如何跨多个 Google 日历同步可用性?