Getting Form Data on Event in Vue
Let's say we have a button and an input where a number is entered. Let's output the square of the number entered into the input when the button is pressed. Let's get to the implementation.
To solve the problem, we will need two properties. The num property will change as data is entered into the input, and in the res property we will write the result of squaring:
data() {
return {
num: 0,
res: 0
}
}
Let's now make an input, bind the num property to it, make a button that, when clicked, will execute the calc method, and also make a paragraph in which the result will be displayed:
<template>
<p>{{ res }}</p>
<input v-model="num">
<button v-on:click="calc">work</button>
</template>
Let's write an implementation of the calc method:
methods: {
calc: function() {
this.res = this.num ** 2;
}
}
It turns out that as soon as the calc method is called (and this will happen when the button is pressed), the result will be written to the res property and will be simultaneously displayed in our paragraph.
Given an input. Given a button. Given a paragraph. A number is entered into the input. Make it so that when you press the button, the square root of this number appears in the paragraph.
Two inputs are given. A button is given. A paragraph is given. Numbers are entered into each input. Make it so that when you click the button, the sum of these numbers appears in the paragraph.
Two inputs are given. A button is given. Some text is entered into each input. Make it so that when you press the button, the text of the first input becomes the second and vice versa.
Given an input, 3 paragraphs and a button. The user's full name is entered into the input, separated by a space. Make it so that when the button is pressed, the user's last name appears in the first paragraph, the first name in the second, and the patronymic in the third.
