单击时将按钮值输入到 v-model答案

【问题标题】：Input buttons value to v-model on click单击时将按钮值输入到 v-model
【发布时间】：2021-08-25 09:49:25
【问题描述】：

所以我得到了这个按钮和一个输入。每当我单击每个按钮之一时，我希望箭头出现在答案字段中，例如，如果我单击两次左箭头和两次右箭头，我希望其中 4 个出现在我的输入中。我怎样才能做到这一点？

<button class="arrow_button">←</button>
<button class="arrow_button">↑</button>
<button class="arrow_button">↓</button>
<button class="arrow_button">→</button>

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

【问题讨论】：

连接模型上的值@click="passwordAnswer += '←'"（添加到每个按钮）

标签： vue.js vuejs3

【解决方案1】：

您需要为所有按钮添加点击处理程序，如下所示：

<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" />

为避免重复，您可以使用 v-for 并遍历您的选项数组（箭头）来创建按钮。

【讨论】：