Total quantity based on user input

Question

Total quantity based on user input

Recently embarking on my Vue journey, I'm curious about how to implement a feature where the input data takes a number and displays it in a variable. Additionally, if the number is entered twice, I want to add them up.

<template>
    ...
</template>

<script>
export default {
        data(){
        return{
            myMoney:null,
            dollar:0
        }

    },
    methods:{
        addMomey(){
            this.myMoney.push(this.myMoney) 
        }


    }
}

I attempted to achieve this functionality but ended up with a direct transfer to a variable instead.

javascript vue.js input

Answer 1

Answer №1

Explore this link:

<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 prefer using enter key, enclose the content in a form and use @submit.prevent, try out this method:

<form @submit.prevent="addMoney">
  <input v-model.number="myMoney" />
  <button type="submit">Add</button>
</form>

Answer 2

Explore this link:

<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 prefer using enter key, enclose the content in a form and use @submit.prevent, try out this method:

<form @submit.prevent="addMoney">
  <input v-model.number="myMoney" />
  <button type="submit">Add</button>
</form>

Total quantity based on user input

Answer №1

Similar questions

Presentation with multi-directional animations

Variability in Focus Behavior while Opening a URL in a New Tab with window.open()

Guide for inserting a button into a Django list for transferring data from the list to an HTML TextField

Determine the placement of a <div> based on information stored in localStorage

Rendering D3 graphs using VueJS

Issue with selecting file not triggering input file selection event in KnockoutJS and HTML when the same file is selected

Utilize Element UI autocomplete to transfer data into a VueJS-powered table's input fields

Angular 6: Issue with displaying data on the user interface

How to efficiently upload multiple files in an array using jQuery and AJAX technology

Reset all modifications made by jQuery animations before initializing a fresh animation

The AJAX request is failing to retrieve the id and pass it along to the PHP script

"Efficiently calculate the total sum of columns in a datatable using dynamic JavaScript across

Potential PHP/Javascript Concurrency Issue

The alignment of elements in the div seems to be slightly skewed

Concealing a paragraph by utilizing v-if within vuex, while also placing it inside a designated tab

What is the best approach to displaying multiple instances of a single class in React, similar to the layout used in platforms such as Instagram, Facebook

Using Axios to fetch data and populating select dropdown options in a Vue component

Disregard all numbers following the period in regex

Is there a way to prevent certain code from executing during server deployment?

The issue with Next.js Incremental Static Regeneration causing changes to not appear on the page until manually reloading