How to display input with the click of a button in Vue? - vue.js

Question

I've been reading about text-fields but I can't figure it out.. I want to be able to type in a name and age, and then when I press the button "add", I want to be able to see the name and age displayed below. What is the easiest or best way of doing this?
My code:
<v-container>
<v-row>
<v-col cols="12" sm="6" md="3">
<v-text-field label="Name" solo></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-text-field label="Age" solo></v-text-field>
</v-col>
<div class="addbutton">
<v-btn color="green darken-1" large v-on:click="add">Add</v-btn>
</div>
</v-row>

Answer 1

First you should bind inputs to the component data using v-model.
script:
export default {
data(){
return {
name: null,
age: null
}
}
}
html:
<v-col cols="12" sm="6" md="3">
<v-text-field label="Name" solo v-model="name"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-text-field label="Age" solo v-model="age"></v-text-field>
</v-col>
Now you can display current inputs values: <p>{{ name + ', ' + age }}</p>
If you want to show/hide them with a button, you can add a data property to store their state, create a method to toggle it and bind their visibility to the property using v-if:
script:
export default {
data(){
return {
name: null,
age: null,
showValues: false
},
methods: {
toggle() {
this.showValues = !this.showValues
}
}
}
html:
<v-row>
<v-col cols="12" sm="6" md="3">
<v-text-field label="Name" solo v-model="name"></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-text-field label="Age" solo v-model="age"></v-text-field>
</v-col>
<div class="addbutton">
<v-btn color="green darken-1" large #click="toogle">Add</v-btn>
</div>
<p v-if="showValues">{{ name + ', ' + age }}</p>
</v-row>

Answer 2

Store the variables in the data of your vue component and the use it to render
<v-row>
<v-col cols="12" sm="6" md="3">
<v-text-field label="Name" solo></v-text-field>
</v-col>
<v-col cols="12" sm="6" md="3">
<v-text-field label="Age" solo></v-text-field>
</v-col>
<div class="addbutton">
<v-btn color="green darken-1" large v-on:click="add">Add</v-btn>
</div>
<v-col cols="12" sm="6" md="3" v-if="render!==null">
<p>{{ render.name }}</p>
<p>{{ render.age }}</p>
</v-row>
<script>
export default {
data(){
return {
name:null,
age:null,
render:null,
},
methods(){
add(){
const name = this.name;
const age = this.age;
this.render = {
name,
age
}
},
}
}
</script>