Vue中点击箭头按钮将值追加到v-model绑定输入框的实现方法

实现步骤 #

你可以通过给箭头按钮绑定点击事件，将对应箭头字符追加到v-model绑定的变量中即可，有两种常用写法：

写法1：内联事件（无需额外定义方法，最简单） #

直接在按钮上绑定点击事件，拼接对应箭头字符到passwordAnswer：

<button class="arrow_button" @click="passwordAnswer += '←'">←</button>
<button class="arrow_button" @click="passwordAnswer += '↑'">↑</button>
<button class="arrow_button" @click="passwordAnswer += '↓'">↓</button>
<button class="arrow_button" @click="passwordAnswer += '→'">→</button>

<input v-model="passwordAnswer" placeholder="Password" />

注意：需要确保passwordAnswer的初始值为空字符串，避免拼接时出现undefined前缀。

写法2：封装公共方法（更易维护，适合按钮多的场景） #

先定义追加箭头的公共方法：

Vue2/选项式API写法

// 组件的methods配置项中添加
methods: {
  appendArrow(arrowChar) {
    this.passwordAnswer += arrowChar
  }
}

Vue3组合式API（script setup）写法

import { ref } from 'vue'
// 初始定义响应式变量
const passwordAnswer = ref('')
// 追加方法
const appendArrow = (arrowChar) => {
  passwordAnswer.value += arrowChar
}

再修改HTML部分的按钮绑定事件：

<button class="arrow_button" @click="appendArrow('←')">←</button>
<button class="arrow_button" @click="appendArrow('↑')">↑</button>
<button class="arrow_button" @click="appendArrow('↓')">↓</button>
<button class="arrow_button" @click="appendArrow('→')">→</button>

<input v-model="passwordAnswer" placeholder="Password" />

内容的提问来源于stack exchange，提问作者Dave