Amount using input

user_17126199 0
Viewed 27

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

vue.js input javascript
1 Answers

Check this out:

<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>
user_33309810
Related