通过 v-on:change 获取输入值并点击 vuejs？

Question

我正在使用 vuejs 中的代码：

模板：

<b-form-input
   placeholder="name"
   type="text"
   class="d-inline-block"
   v-model="name"
   v-on:change="changeInput"
/>
<b-button
   variant="primary"
   class="btn-tour-finish"
   @click="getValue()"
   >
</b-button>

data() {
  return {
    name: '',
  }
}
methods: {
 getValue() {
   console.log(this.name)
 },
 changeInput() {
   console.log(this.name)
 },
}

在这里，当我在按钮上click 获得输入值或通过v-on:change 事件输入时，也获得输入值。但这里的问题是我必须使用相同的代码在方法中处理两次。 （@click 和 v-on: change）。有没有办法在方法中将@click 和v-on:change 组合成一个函数？

Answer 1

你可以这样做：

<b-form-input
   placeholder="name"
   type="text"
   class="d-inline-block"
   v-model="name"
   @keyup.enter="changeValue"
/>
<b-button
   variant="primary"
   class="btn-tour-finish"
   @click="changeValue"
   >
</b-button>

data() {
  return {
    name: '',
  }
}
methods: {
 changeValue() {
   console.log(this.name)
 },
}

Answer 2

用函数包装相同的代码

data() {
  return {
    name: '',
  }
}
methods: {
 getValue() {
   this.handle()
 },
 changeInput() {
   this.handle()
 },
 handle() {
   console.log(this.name)
 },
}