I just started my journey in vue, how to make the input data take a number into itself, and then display it in a variable, and if you enter 2 times, then add them up.
<template>
<div class="portfel">
<div class="profile">
<div class="content__prof">
<div class="ico__prof"><img src="" alt=""></div>
<div class="buttom__prof">
<input id="txtName" @keyup.enter="addMessage" v-model="myMoney" type="text">
<button @click="addMoney">Sum</button>
</div>
<div class="value__prof">
<div>$: {{myMoney}}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
myMoney:null,
dollar:0
}
},
methods:{
addMomey(){
this.myMoney.push(this.myMoney)
}
}
}
I tried to do it, but it turns out just a direct transfer to a variable
<script>
export default {
data() {
return {
myMoney: 0,
dollar: 0
}
},
methods: {
addMoney() {
this.dollar += this.myMoney
}
}
}
</script>
<template>
<input v-model.number="myMoney" />
<button @click="addMoney">Add
</button>
<div>
dollar: {{this.dollar}}
</div>
</template>
If you want to use enter, wrap it in a form and listen for @submit.prevent, like this:
<form @submit.prevent="addMoney">
<input v-model.number="myMoney" />
<button type="submit">Add</button>
</form>