Vue js 组件中的方法

Question

下面的代码给了我一些下一个错误。 我要做的就是输入数据，然后按钮应该发出警报并输出输入的数据。

<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);
    }
  }
}

Answer 1

methods: {
    clickHandler: function() {
      alert("Name of SIR: " + this.value);
    }
  }

将您的代码发送至sandbox and play