CODEWITHSUNDEEP
vue.jsvuejs3
Dave
Dave

Reputation: 2018

Input buttons value to v-model on click

So I got this buttons and an input. Whenever I click one of each button, I want the arrow to appear in the answer field, for example If i click twice left arrow and twice right arrow, I want 4 of them to be in my input. How can I achieve this?

enter image description here

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

Upvotes: 0

Views: 789

Answers (1)

mik3ybark3r
mik3ybark3r

Reputation: 36

You need to add a click handler to all of your buttons, like this:

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

To avoid duplicates you can use v-for and iterate over an array of your options (arrows) to create the buttons.

Upvotes: 2

Related Questions